antd 批量上传文件逻辑

 1 props : {  2   multiple: true,  3   maxCount:20,//限制最多显示 20 个文件  4   onRemove: (file) => {//删除列表文件  5     let fileListbatch_curr=this.state.fileListbatch;  6     console.log("props-onRemove-fileListbatch_curr:",fileListbatch_curr);  7     let index = fileListbatch_curr.findIndex(item=>item.uid==file.uid);  8     console.log("props-onRemove-obj:",index,file.uid);  9     if(index==-1){ 10       //message.warning("未删除成功！") 11       return; 12     }else{ 13       const newFileList = fileListbatch_curr.slice(); 14       newFileList.splice(index, 1); 15       console.log("props-onRemove-newFileList:",newFileList); 16       this.setState({fileListbatch:newFileList}); 17       let uploadsuccesslist_curr=this.state.uploadsuccesslist; 18       let indexsuccess=uploadsuccesslist_curr.findIndex(item=>item.uid==file.uid);//根据唯一码 uid 查找目标文件的索引 19       if(indexsuccess!=-1){ 20         uploadsuccesslist_curr.splice(indexsuccess, 1);//删除 21         console.log("props-onRemove-uploadsuccesslist_curr:",uploadsuccesslist_curr); 22         this.setState({uploadsuccesslist:uploadsuccesslist_curr}); 23       } 24     } 25   }, 26   beforeUpload: (file) => {//添加文件，将文件加入临时列表，准备上传 27     let fileListbatch_curr=this.state.fileListbatch; 28     let ff=fileListbatch_curr.find((item)=>item.name==file.name); 29     if(ff==undefined){ 30       fileListbatch_curr.push(file); 31       this.setState({fileListbatch:fileListbatch_curr,uploadflag:false}); 32       return false; 33     } 34     else{ 35       message.warning("存在同名文件已选择，请确认！"); 36       return Upload.LIST_IGNORE;//列表中不显示 37     } 38   }, 39   fileListbatch_cc, 40 }

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

  1 //批量上传文件   2 batchUploadReports = () => {   3 this.setState({uploadsuccesslist:[]})   4 let uploadsuccesslist_curr=[];   5 this.formRef_upload.current.validateFields()   6 .then(formrefcurr => {   7   if(formrefcurr["baogaolb"]==0||formrefcurr["baogaolx"].length==0){   8     message.warning("请检查必填项！");   9     return null;  10   }  11   this.setState({fileuploading:true,uploadsuccesslist:[],tipContent:"报告文件上传中，请耐心等待..."});  12   let fileListbatch_curr2=this.state.fileListbatch;  13   let filecount=fileListbatch_curr2.length;  14   let filecount_success=0;  15   if(filecount>20){//只取前 20 个文件  16     filecount=20;  17     fileListbatch_curr2=fileListbatch_curr2.splice(0,20);  18   }  19   try{//通过抛出异常，来中断 foreach  20     fileListbatch_curr2.forEach(element => {//文件 list 循环上传  21       if(element.size/(1024*1024)>200){  22         this.setState({fileuploading:false,uploadsuccesslist:[],tipContent:"报告文件上传中，请耐心等待..."})  23         message.warning("单个报告大小不允许超过 200MB，请检查后继续上传！");  24         // fileListbatch_curr2.length=0;  25         throw new Error(element)//若有不符合条件的文件，抛出异常中断循环  26       }  27       else{  28         let filename=element.name;  29         let chunklistcurr=this.createFileChunk(element).map(({ file, name }, index) => {//createFileChunk:创建文件切片，可处理大文件  30             return {  31               chunk: file,  32               size: file.size,  33               percent: 0,  34               //filename:file.  35               name: name,// + "-" + (index + 1),  36               index,  37             };  38           });  39         let filecountchunk=chunklistcurr.length;  40         let ii=0;  41         chunklistcurr.forEach(element => {//分片传输  42           const formData = new FormData()  43           formData.append('file', element.chunk);  44           formData.append('index', element.index);  45           formData.append('name', element.name);  46           formData.append('size', element.size);  47           //formData.append('filecount', filecount);  48           axios({  49             method: 'post',  50             url: '/api/system/System/UploadFileAttachmentChunk?zhuti='+this.state.zhuti,  51             data: formData,  52             headers: { "Content-Type": "multipart/form-data"}  53           }).then(({data}) => {  54             if(data.code==200){  55               ii++;  56               if(ii==filecountchunk){//分块全部上传完成  57                 let indata={"name":chunklistcurr[0].name,"filecount":filecountchunk,"filename":filename  58                   }  59                 axios({//传输完成，通知拼接  60                   method: 'post',  61                   url: '/api/system/System/CombineChunkToFileBatch',  62                   data: indata,  63                   headers: { "Content-Type": "application/json"}  64                 }).then(({data}) => {  65                   if(data.code==200){  66                     let listbatchupload={}  67                     uploadsuccesslist_curr.push(listbatchupload);  68                     this.setState({uploadsuccesslist:uploadsuccesslist_curr});  69                     filecount_success++;  70                   }  71                   else if(data.code==202){  72                     window.location.href="/wellcome";  73                   }  74                   else{  75                     message.error("上传失败，请稍后重试！详情："+data.desc);  76                     filecount_success++;  77                   }  78                 }).catch((err) =>{  79                     console.log(err);  80                     message.error("上传失败，请稍后重试！");  81                 }).finally(() =>{  82                   if(filecount_success==filecount){  83                     this.setState({uploadflag:true})  84                     message.success("全部上传完成，请进一步确认上传是否全部成功");  85                     this.setState({fileuploading:false,tipContent:"加载中..."});  86                   }  87                 })  88               }  89             }  90             else if(data.code==202){  91               window.location.href="/wellcome";  92             }  93             else{  94               message.error("上传失败，请稍后重试！详情："+data.desc);  95               chunklistcurr.length=0;  96               return;  97             }  98           }).catch((err) =>{  99               console.log(err); 100               message.error("上传失败，请稍后重试！"); 101               return; 102           }).finally(() =>{ }) 103         }) 104       } 105     }); 106   } 107   catch(e){         108     console.log('catch-e:'+e) 109   } 110 }) 111 }

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