项目有时候会有文件上传的需求。在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]()