Antd 多文件上传后台接收为 null 问题
在使用 antd 开发过程中，Upload 组件的上传，一般是通过 action 配置后端接口地址，自动上传文件；但是当文件数量较多时，需要进行手动上传，但是手动上传后台一直无法接收到数据，数据为 null。
代码实现
前段组件代码如下：
const onRemove = (file) => { this.setState((state) => { const index = state.fileList.indexOf(file); const newFileList = state.fileList.slice(); newFileList.splice(index, 1); return { fileList: newFileList, }; }); }; const beforeUpload = (file) => { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { message.error('请上传图片格式文件!'); return isJpgOrPng || Upload.LIST_IGNORE; } this.setState(state => ({ fileList: [...state.fileList, file], })); return false; };
<Upload fileList={fileList} onRemove={onRemove} beforeUpload={beforeUpload} directory accept=".png,.jpg,.jpeg" showUploadList={false} onChange={this.onChange} > <Button icon={<UploadOutlined />} > Click to upload </Button> </Upload>复制代码
复制代码
前端上传逻辑代码：
const formData = new FormData(); // 组装数据 fileList.forEach((file) => { formData.append('files', file); }); formData.append('id', galleryId); // 保存图片请求接口 reqwest({ // 上传url url: 'url', method: 'post', // 必须false才会避开jQuery对 formdata 的默认处理 processData: false, // 必须false才会自动加上正确的Content-Type contentType: false, data: formData, success: (res) => { message.success('上传图片成功'); }, error: () => { message.error('上传图片失败'); }, });复制代码
复制代码
后端代码：
public Message insertPic(@RequestParam(value = "files", required = true) MultipartFile[] files) { // 判断file数组不能为空并且长度大于0 if (files != null && files.length > 0) { //循环获取file数组中得文件 for (int i = 0; i < files.length; i++) { MultipartFile file = files[i]; } } }
复制代码
复制代码
分析
F12 查看请求头：
F12 查看入参：
因为接口是可以调通的，我一直以为是后端在处理数据时，将数据转换成 null,
解决
百度之后：
定义文件解析器MultipartResolver的时候，有没有设置resolveLazily属性为true（默认值为false）。可能是MultipartResolver在initBinder的时候默认会自动解析request，并清空文件流里的内容，导致在controller中的request获取不到文件流信息。 但是按照网上进行相关设置之后，还是不行，仍然为 null。
当用 postman 进行接口测试时，竟然可以了，我意识到可能并不是后端的问题，又仔细看了一下请求头、入参，发现传送的参数类型是[object Object]，打断点查看 fileList：
原来 fileLsit 不是 File 对象数组，originFileObj 才是真正的 File。修改代码：
fileList.forEach((file) => { formData.append('files', file.originFileObj, file.name); });复制代码
复制代码
果然成功了，终于泪流满对面啊～～～，查看入参
总结
仔细查看 antd 文档
最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163 相互学习，我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点 star:http://github.crmeb.net/u/defu不胜感激 ！
PHP 学习手册：https://doc.crmeb.com
技术交流论坛：https://q.crmeb.com
评论