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)
    })
}
//以下的步骤雷同,这样即使中间某一个文档的某一个步骤失败了,是不影响其它接口上传的
相关推荐
RationalDysaniaer19 天前
Umi UI报错:连接失败,请尝试重启dev服务
arco design·anti-design-vue
weixin_mouren2 个月前
3.2 Upload源码分析 -- ant-design-vue系列
前端·javascript·vue.js·anti-design-vue
GISer_Jing2 个月前
Ant-Design-Vue快速上手指南+排坑
前端·vue.js·anti-design-vue
vvvae12342 个月前
Ant Design Vue 快速上手指南与排坑经验分享
anti-design-vue
Roc.Chang3 个月前
Ant Design Vue 使用 Modal.confirm() 方式点击确认或取消无法关闭
javascript·vue.js·anti-design-vue
.生产的驴3 个月前
Vue3 纯JS单文件使用Pinia 数据共享 方法封装
开发语言·前端·javascript·vue.js·json·html5·anti-design-vue
Yang_yangyang3 个月前
上传文件,文件类型限制语法,各种媒体视频文件的Content-Type
前端框架·jquery·html5·anti-design-vue·view design
Ciito3 个月前
antdv和element表格,假分页+表格高度处理mixins
前端·elementui·vue·anti-design-vue
小洪爱分享3 个月前
Bug 解决 | 组件库报错、或样式丢失不生效
前端·经验分享·笔记·后端·bug·anti-design-vue
小洪爱分享3 个月前
Bug 解决 | 前端框架初始化错误
前端·经验分享·笔记·前端框架·bug·anti-design-vue