react+antd图片批量上传调一次接口

2021-10-27 18:02:22 阅读：298 来源： 互联网

标签：files const 接口 react file antd message 上传

react结合ant design做图片批量上传，使用的是ant design的Upload组件。

操作：点击上传图片按钮，批量选中图片，确认上传。

这个时候，antd的处理是，依次上传图片，一张图片调一次接口，选中8张图片，就会调用8次文件上传的接口，现在由于上传调用接口次数较多，于是准备改造成批量选中图片只调用一次接口，仍然用antd的Upload组件实现。

上传图片的时候，会把批量选中的图片放到一个数组中，所以上传前就可以拿到批量选好的图片，这个时候，声明一个布尔变量isUpload，判断是否调用过一次上传接口，未调用的话，就把拿到的所有图片数组作为参数，调用上传接口，然后将isUpload置为true；如果已调用的话，就不再调用了。这样就可以实现批量上传调用一次接口。

  //上传文件过程中
  uploadImg = (file, fileList) => {
    this.setState({
      filesSinning: true,
      files: [...fileList],
      isUpload: true
    });
  };

  // 上传文件
  uploadFiles = () => {
    if (this.state.isUpload) {
      this.upload()
    }
    this.setState({
      isUpload: false
    });
  }

  // 上传调接口
  upload = () => {
    new Promise((resolve) => {
      const {
        dispatch,
        location: {
          query: { id },
        },
      } = this.props;
      const { files } = this.state
      const formData = new FormData();
      let SumSize = 0;
      files.forEach(file => {
        SumSize += file.size
        formData.append('files', file);
      })
      formData.append('module', 'CLAIMCOMPLETE');
      formData.append('id', id);

      const fileCount = files.length > 20; // 文件数
      const fileNameLength = files.some(file => file.name.length > 100); // 文件名长度
      const fileSize = files.some(file => file.size / 1024 / 1024 > 50); // 单个文件大小
      const fileTotalSize = SumSize / 1024 / 1024 > 100; // 批量上传文件的总大小

      if (fileCount || fileNameLength || fileSize || fileTotalSize) {
        this.setState({
          filesSinning: false,
        });
      }
      if (fileCount) {
        message.warning('文件数不能超过20');
        return
      }
      if (fileNameLength) {
        message.warning('文件名长度不能超过100个字符');
        return
      }
      if (fileSize) {
        message.warning('单个文件大小不能超过50MB');
        return
      }
      if (fileTotalSize) {
        message.warning('文件总大小不能超过100MB');
        return
      }
      dispatch({
        type: 'claim/uploadManyFile',
        payload: formData,
        callback: (res) => {
          if (res) {
            message.success('上传成功', 2);
            this.setState({
              filesSinning: false,
            });
            this.getDetailData();
          } else {
            this.setState({
              filesSinning: false,
            });
            message.error(res.msg, 2);
            resolve(res);
            return;
          }
        },
      }).catch((err) => {
        this.setState({
          filesSinning: false,
        });
        message.error(err, 2);
        this.getDetailData();
      });
    })
  }

  // 删除文件
  deleteFile = (v) => {
    const { dispatch } = this.props;
    Modal.confirm({
      title: '提示',
      content: '你确定要删除这个文件吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          // type为-命名空间+models里面设置的名字
          type: 'claim/deleteFile',
          payload: { id: parseInt(v.uid), module: 'CLAIM' },
          callback: (data) => {
            if (data) {
              setTimeout(() => {
                message.success('删除成功', 2);
              }, 500);
              this.getDetailData();
            }
          },
        });
      },
    });
  };

<Upload
    listType="picture"
    className="upload-list-inline"
    multiple
    accept=".png,.jpg,.jpeg,.pdf"
    onChange={this.uploadFiles}
    fileList={filesList}
    beforeUpload={this.uploadImg}
    onPreview={this.handlePreview}
    onRemove={this.deleteFile}
    customRequest={() => { }}
  >
    <div className={styles.uploadBtn}>上传</div>
</Upload>

标签：files,const,接口,react,file,antd,message,上传
来源： https://www.cnblogs.com/afafaa/p/15471967.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react+antd图片批量上传调一次接口