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>