antd 批量上传文件逻辑

基本步骤

　　通过 antd 框架的 Upload 控件，采用手动上传的方式，先选择需要上传的文件（控制文件数量以及大小），再根据所选的文件列表，循环上传，期间通过 Spin 控件提示上传中。

效果展示

　　

 控件引用

　　Upload 控件配置：

props : {
  multiple: true,
  maxCount:20,//限制最多显示 20 个文件
  onRemove: (file) => {//删除列表文件
    let fileListbatch_curr=this.state.fileListbatch;
    console.log("props-onRemove-fileListbatch_curr:",fileListbatch_curr);
    let index = fileListbatch_curr.findIndex(item=>item.uid==file.uid);
    console.log("props-onRemove-obj:",index,file.uid);
    if(index==-1){
      //message.warning("未删除成功！")
      return;
    }else{
      const newFileList = fileListbatch_curr.slice();
      newFileList.splice(index, 1);
      console.log("props-onRemove-newFileList:",newFileList);
      this.setState({fileListbatch:newFileList});
      let uploadsuccesslist_curr=this.state.uploadsuccesslist;
      let indexsuccess=uploadsuccesslist_curr.findIndex(item=>item.uid==file.uid);//根据唯一码 uid 查找目标文件的索引
      if(indexsuccess!=-1){
        uploadsuccesslist_curr.splice(indexsuccess, 1);//删除
        console.log("props-onRemove-uploadsuccesslist_curr:",uploadsuccesslist_curr);
        this.setState({uploadsuccesslist:uploadsuccesslist_curr});
      }
    }
  },
  beforeUpload: (file) => {//添加文件，将文件加入临时列表，准备上传
    let fileListbatch_curr=this.state.fileListbatch;
    let ff=fileListbatch_curr.find((item)=>item.name==file.name);
    if(ff==undefined){
      fileListbatch_curr.push(file);
      this.setState({fileListbatch:fileListbatch_curr,uploadflag:false});
      return false;
    }
    else{
      message.warning("存在同名文件已选择，请确认！");
      return Upload.LIST_IGNORE;//列表中不显示
    }
  },
  fileListbatch_cc,
}

　　界面元素排列：

<Upload {...props}>
  <Button icon={<UploadOutlined />}>选择文件（Max:20Pcs, Max:200MB）</Button>
</Upload>
<Button
  type="primary"
  onClick={this.batchUploadReports}
  disabled={fileListbatch.length === 0}
  //loading={uploading}
  style={{ marginTop: 20,width:180 }}
>
  {/* {uploading ? 'Uploading' : 'Start Upload'} */}
  开始上传
</Button>
<label style={{ lineHeight: "0px", color: '#bfbfbf', fontSize: 10,float:'left',marginBottom:20 }}>支持扩展名：apk/exe/pdf/xls/doc/ppt等</label>

处理逻辑

　　根据文件列表，循环上传全部文件。

　　【后端采用 .Net 5.0 WebAPI 详见：大文件分片上传 中的“后端部分”】

//批量上传文件
batchUploadReports = () => {
this.setState({uploadsuccesslist:[]})
let uploadsuccesslist_curr=[];
this.formRef_upload.current.validateFields()
.then(formrefcurr => {
  if(formrefcurr["baogaolb"]==0||formrefcurr["baogaolx"].length==0){
    message.warning("请检查必填项！");
    return null;
  }
  this.setState({fileuploading:true,uploadsuccesslist:[],tipContent:"报告文件上传中，请耐心等待..."});
  let fileListbatch_curr2=this.state.fileListbatch;
  let filecount=fileListbatch_curr2.length;
  let filecount_success=0;
  if(filecount>20){//只取前 20 个文件
    filecount=20;
    fileListbatch_curr2=fileListbatch_curr2.splice(0,20);
  }
  try{//通过抛出异常，来中断 foreach
    fileListbatch_curr2.forEach(element => {//文件 list 循环上传
      if(element.size/(1024*1024)>200){
        this.setState({fileuploading:false,uploadsuccesslist:[],tipContent:"报告文件上传中，请耐心等待..."})
        message.warning("单个报告大小不允许超过 200MB，请检查后继续上传！");
        // fileListbatch_curr2.length=0;
        throw new Error(element)//若有不符合条件的文件，抛出异常中断循环
      }
      else{
        let filename=element.name;
        let chunklistcurr=this.createFileChunk(element).map(({ file, name }, index) => {//createFileChunk:创建文件切片，可处理大文件
            return {
              chunk: file,
              size: file.size,
              percent: 0,
              //filename:file.
              name: name,// + "-" + (index + 1),
              index,
            };
          });
        let filecountchunk=chunklistcurr.length;
        let ii=0;
        chunklistcurr.forEach(element => {//分片传输
          const formData = new FormData()
          formData.append('file', element.chunk);
          formData.append('index', element.index);
          formData.append('name', element.name);
          formData.append('size', element.size);
          //formData.append('filecount', filecount);
          axios({
            method: 'post',
            url: '/api/system/System/UploadFileAttachmentChunk?zhuti='+this.state.zhuti,
            data: formData,
            headers: { "Content-Type": "multipart/form-data"}
          }).then(({data}) => {
            if(data.code==200){
              ii++;
              if(ii==filecountchunk){//分块全部上传完成
                let indata={"name":chunklistcurr[0].name,"filecount":filecountchunk,"filename":filename
                  }
                axios({//传输完成，通知拼接
                  method: 'post',
                  url: '/api/system/System/CombineChunkToFileBatch',
                  data: indata,
                  headers: { "Content-Type": "application/json"}
                }).then(({data}) => {
                  if(data.code==200){
                    let listbatchupload={}
                    uploadsuccesslist_curr.push(listbatchupload);
                    this.setState({uploadsuccesslist:uploadsuccesslist_curr});
                    filecount_success++;
                  }
                  else if(data.code==202){
                    window.location.href="/wellcome";
                  }
                  else{
                    message.error("上传失败，请稍后重试！详情："+data.desc);
                    filecount_success++;
                  }
                }).catch((err) =>{
                    console.log(err);
                    message.error("上传失败，请稍后重试！");
                }).finally(() =>{
                  if(filecount_success==filecount){
                    this.setState({uploadflag:true})
                    message.success("全部上传完成，请进一步确认上传是否全部成功");
                    this.setState({fileuploading:false,tipContent:"加载中..."});
                  }
                })
              }
            }
            else if(data.code==202){
              window.location.href="/wellcome";
            }
            else{
              message.error("上传失败，请稍后重试！详情："+data.desc);
              chunklistcurr.length=0;
              return;
            }
          }).catch((err) =>{
              console.log(err);
              message.error("上传失败，请稍后重试！");
              return;
          }).finally(() =>{ })
        })
      }
    });
  }
  catch(e){        
    console.log('catch-e:'+e)
  }
})
}

//创建文件切片
createFileChunk = (file, size = 20*1024*1024) => {
    const fileChunkList = [];
    let cur = 0;
    while (cur < file.size) {
      fileChunkList.push({ file: file.slice(cur, cur + size), name: file.uid });//uid:文件唯一标识
      cur += size;
    }
    return fileChunkList;
};

 注：本文代码已在项目中实用，有疑问欢迎指正。