antd中的上传组件你可能想要知道的姿势

1.最近换了家公司，机会每天都是9点下班，12点多下班，没有机会记录这在期间遇到的一些小坑；
2.之前写的博客也有好多只有写了一半，没有完成，这几天项目逐渐完成，后续一定完成；
一、收先说一下我这两天遇到的一些小坑，比如antd中的上传组件的批量上传
1.如何设置批量上传？

 const props = {
      name:"file",
      accept:'.mp3,.amr,.wav',
      action: `${local}/file/upload?type=material`,
      beforeUpload:this.beforeUpload,
      onChange: this.handleChange,
      headers:{Authorization},
      multiple: true,//这里来设置批量上传控制
    }

2、如何知道最后一个文件上传成功？
1.设置beforeUpload :this.beforeUpload;
2.我这里有很多地方用到了这个上传组件，所以我单独把这个函数抽离出来了，当做了一个公共函数：
beforeUploadStep2这个就是我抽离出来的公共函数名：

	beforeUpload =（beforeUpload = (file,fileList) =>{
	//参数这里就不介绍了，文档上有
				let arr = this.state.createData.voicePath.slice(0);//深拷贝一下，上传成功的备份文件。
			  let isupload = true;//这里返回true或者false 表示是上传还是不上传
			  beforeUploadStep2(file,fileList,arr,this.beforeList,(type)=>{
			  	//这里是回调函数,把true或者false，传回来
			    isupload= type
			  },()=>{
			  //这里就是把选中上传的文件push到一个数组中，这里不需要刷新数据，同时也为了性能，所以不用存在this.state中，
			    this.beforeList.push(file);
			  })
			  return isupload
		}

这里来展示beforeUploadStep2封装函数：

export const beforeUploadStep2 =(file,fileList,arr,beforeList,uploadcal,addfile,isLt20M)=>{
    
  let z_index = null ;
  let beforeRepeat = null;
  let dup = null;
  let f20M = null;
 
  fileList.forEach((item,index)=>{
   
    if(item.name ===file.name){
      z_index= index;
    }
  });
 
  if(z_index==0){

    let arr = [];
    fileList.forEach((item,index)=>{
        if(item.size/1024/1024 >20){
            f20M= true;
            arr.push(item)
        }
      });
      if(f20M){
        Modelerror(arr)
      }
  }
  if(z_index==0){
   
    arr.some((i1,x1)=>{
      fileList.forEach((i2)=>{
        if(i2.name === i1.name&&i2.lastModified==i1.lastModified){
          dup= true
        }
      })
    })

        beforeList.forEach(i3=>{
            if(file.name === i3.name&&i3.lastModified==file.lastModified){
             
              beforeRepeat = true
            }
          })
    
    
    if(dup||beforeRepeat){
      warning('请不要上传重复文件');
    }
  }
  let isrepeat = arr.some(i=>{return (i.name === file.name&&i.lastModified==file.lastModified)});
  let isbeforeRepeat = beforeList.some(i1=>{
   
    return  (i1.name === file.name&&i1.lastModified==file.lastModified)
  })
  let isf20M = file.size/1024/1024 >20;
  

  if(isrepeat||isbeforeRepeat||isf20M){

    dup = false;
    isbeforeRepeat=false;
    beforeRepeat=false;
    uploadcal(false)
    
  }
 
  addfile()
}

上传前的准备工作已经完成，
现在开始上传中的工作：
1.思路：
文件在上传中 会有三个状态
①、uploading 状态 正在上传的文件（这里可自定义上传条）
②、error 状态 没有上传成功的文件
③、done 状态 已经上传成功的文件
我们需要做的是在error状态和done状态 都要删除一下已经上传的文件，（this.beforeList）;
到最后this.beforeList的length===0 的时候，那就是最后一个文件也上传完成的时候；

若有不对的地方 请留言 ！
谢谢~~