FormData和文件上传

项目有时候会有文件上传的需求。在react + ant design项目中，使用表单组件进行表单数据和文件一起提交上传时，reqwest和axios都是不错的请求方式，使用方式也有异同。

数据方面利用formData来进行处理文件信息和表单数据。组件用的是ant design里面的Form和Upload。

let formData = new FormData();
// 文件信息
let { fileList } = this.state;
// 批量上传
for (let item of fileList) {
	formData.append('file', item)
}
// 要提交的表单数据
formData.append('flowId', infoApprove.flowId);
formData.append('functionId', functionId);
formData.append('linkId', infoApprove.linkId);
formData.append('opinion', infoApprove.opinion);
formData.append('statusId', infoApprove.statusId);
formData.append('taskId', infoApprove.taskId);
formData.append('userId', infoApprove.userId);

reqwest请求：

reqwest({
url: server_host+`/yunwei/task/flowBlock`, // 上传url
	method: 'post',
	processData: false,  //必须false才会避开jQuery对 formdata 的默认处理
	contentType: false, //必须false才会自动加上正确的Content-Type
	data: formData,
	success: () => {
		that.setState({
			fileList: [],
		})
message.success('提交成功');
},
	error: () => {
		message.error('提交失败');
	},
});

axios请求：

/* 
* formData已经对文件的数据进行过处理了，借此保证可以传到后台服务器
* 上传文件时一定要指定'Content-Type':'multipart/form-data'
*/
axios.post(server_host+`/yunwei/task/flowBlock`,formData,{
'Content-Type':'multipart/form-data'
}).then(res=>{
	if(res.status === 200){
		this.setState({
			fileList: [],
		})
message.success('提交成功');
	}else{
		message.error('提交失败');
	}
})

附上FormData的介绍：
FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。
参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects