乐趣区

关于antd:Antd多文件上传后台接收为null问题

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

退出移动版