react如何实现文件上传

import{Table,Button,Modal,Form,Input,Upload,Icon,notification}from'antd';

//点击关闭在次打开还会有上次上传文件的缓存


选择文件






{getFieldDecorator('filename',{
//initialValue:this.state.defEmail,
rules:[
{
message:'请输入正确的文件名',
//pattern:/^[0-9]+$/,
},
{
required:true,
message:'请输入文件名',
},
],
})()}


{getFieldDecorator('describe',{

rules:[
{
message:'描述不能为空',
},
{
required:false,
message:'请输入描述',
},
],
})()}


{getFieldDecorator('filetype',{
rules:[
{
message:'文件类型',
},
{
required:true,
message:'文件类型',
},
],
})()}

constprops={
showUploadList:true,
onRemove:file=>{
this.setState(state=>{
constindex=state.fileList.indexOf(file);
constnewFileList=state.fileList.slice();
newFileList.splice(index,1);
return{
fileList:newFileList,
};
});
},
beforeUpload:f免费云主机、域名ile=>{
console.log(file)
let{name}=file;
varfileExtension=name.substring(name.lastIndexOf('.')+1);//截取文件后缀名
this.props.form.setFieldsValue({'filename':name,'filetype':fileExtension});//选择完文件后把文件名和后缀名自动填入表单
this.setState(state=>({
fileList:[...state.fileList,file],
}));
returnfalse;
},
fileList,
};

handleOk=e=>{//点击ok确认上传
const{fileList}=this.state;
letformData=newFormData();
fileList.forEach(file=>{
formData.append('file',file);
});

this.props.form.validateFields((err,values)=>{//获取表单值
let{filename,filetype,describe}=values;
formData.append('name',filename);
formData.append('type',filetype);
formData.append("dir","1");
if(describe==undefined){
formData.append('description',"");
}else{
formData.append('description',describe);
}

UploadFile(formData).then(res=>{//这个是请求
if(res.status==200&&res.data!=undefined){
notification.success({
message:"上传成功",
description:res.data,
});
}else{
notification.error({
message:"上传失败",
description:res.status,
});
}
})
this.setState({
visible:false
});

})
};

fetch(url,{//fetch请求
method:'POST',
body:formData,
})






axios({//axios
method:'post',
url:url,
data:formData,
headers:{//可加可不加
'Content-Type':'multipart/form-data;boundary=----
WebKitFormBoundary6jwpHyBuz5iALV7b'
}
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});

选择文件

this.props.form.resetFields()//添加之前把input值清空
this.setState({
visible:true,
fileList:[]//把文件列表清空
});