前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Antd多文件上传后台接收为null问题

Antd多文件上传后台接收为null问题

原创
作者头像
PHP开发工程师
发布2022-03-14 10:05:20
1.5K0
发布2022-03-14 10:05:20
举报
文章被收录于专栏:thinkphp+vue

Antd多文件上传后台接收为null问题

在使用antd开发过程中,Upload组件的上传,一般是通过action配置后端接口地址,自动上传文件;但是当文件数量较多时,需要进行手动上传,但是手动上传后台一直无法接收到数据,数据为null。

代码实现

前段组件代码如下:

代码语言:javascript
复制
    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>
复制代码

前端上传逻辑代码:

代码语言:javascript
复制
    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('上传图片失败');
      },
    });
复制代码

后端代码:

代码语言:javascript
复制
    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,

解决

  1. 百度之后:

定义文件解析器MultipartResolver的时候,有没有设置resolveLazily属性为true(默认值为false)。可能是MultipartResolver在initBinder的时候默认会自动解析request,并清空文件流里的内容,导致在controller中的request获取不到文件流信息。 但是按照网上进行相关设置之后,还是不行,仍然为null。

  1. 当用postman进行接口测试时,竟然可以了,我意识到可能并不是后端的问题,又仔细看了一下请求头、入参,发现传送的参数类型是[object Object],打断点查看fileList:

原来fileLsit不是File对象数组,originFileObj才是真正的File。修改代码:

代码语言:javascript
复制
 fileList.forEach((file) => {
    formData.append('files', file.originFileObj, file.name);
 });
复制代码
  1. 果然成功了,终于泪流满对面啊~~~,查看入参

总结

仔细查看antd文档

  • FileList确实是一个File对象数组
  • 但是仔细阅读FAQ发现

最后

如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Antd多文件上传后台接收为null问题
    • 代码实现
      • 分析
        • 解决
          • 总结
            • 最后
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档