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

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>