关于组件上传文档除了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) }) } //以下的步骤雷同,这样即使中间某一个文档的某一个步骤失败了,是不影响其它接口上传的