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文档

FileList的确是一个File对象数组


然而仔细阅读FAQ发现

最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163互相学习，咱们会有业余的技术答疑解惑

如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点star:http://github.crmeb.net/u/defu不胜感激 ！

PHP学习手册：https://doc.crmeb.com
技术交换论坛：https://q.crmeb.com