Ant-design-vue组件上传文档

关于组件上传文档除了element-ui，最近用到的就是ant组件，非同小异；

<a-upload
    :fileList="fileList"
    name="file"
    :multiple="true"
    :before-upload="handleDirectoryUpload"
    :remove="removeFile
  >
    <a-button>
      <a-icon type="upload"/>上传文件夹
    </a-button>
  </a-upload>

其中，在data变量中定义 fileList存储上传的文件夹中的数据；

handleDirectoryUpload(file){
    this.fileList.push(file);
    return false
},

//删除预上传的文件，不加该方法属性，点击删除无效
removeFile(file){
    let index = this.fileList.findIndex(i=> i.uuid == file.uuid);
    this.fileList.splice(index,1)
}

原本是前端向后端发起一个请求，请求的成功后则显示上传成功，由于项目功能需要，上传的时间过长影响用户体验，用户不清楚多久可以上传成功，所以 将一个接口进行拆分成五个接口，每个接口都有对应的功能；比如步骤：上传---针对于上传文件的内容进行处理---处理完成后需要抽取---抽取成功后生成一个html文件便于访问---保存相关的数据；

针对上面的步骤必须等待某一个步骤成功后才能进行下一个，但是重点在于一个文件夹中多个文档的上传，其中某一个文件的走第一个接口不成功，但是不能影响上传成功的文档继续走下面的步骤；

//通过异步进行处理

//此处写一个大致的上传的方法
handOk(){
    let resquest_list = this.fileList.map(async(e)) => {
        //文件格式都是以formData格式
        const formData = new FormData();
        formData.set("file",e)
        formData.set("属性名",属性值);
        try{
            //异步请求接口
            let data = await uploadOne(formData)
            return data
        }catch(error){return null}
    });
    
    //promise.all所有的请求成功后走下面
    Promise.all(resquest_list)then(async res => {//获取到的res是个数组，过滤出有值的数据
        res = res.filter(i => i)
        await getUploadTwo(res)
    })
},
getUploadTwo(res){
    let arr = res.map(async(e)) => {
        try{
            //异步请求接口
            let data = await uploadTwo({key: value}) //对应的参数
            return data
        }catch(error){return null}
    });
    
    //promise.all所有的请求成功后走下面
    Promise.all(arr)then(async res => {//获取到的res是个数组，过滤出有值的数据
        res = res.filter(i => i)
        await getUploadThree(res)
    }).catch(e => {
        console.log(e)
    })
}
//以下的步骤雷同，这样即使中间某一个文档的某一个步骤失败了，是不影响其它接口上传的