vue上传功能加入进度条

最新推荐文章于 2024-11-06 15:41:55 发布

reembarkation

最新推荐文章于 2024-11-06 15:41:55 发布

阅读量849

点赞数 14

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/reembarkation/article/details/136324113

版权

本文介绍了如何在使用axios发送文件上传请求时，无论是否封装，如何加入上传进度的处理，并在页面中显示进度。对于未封装的情况，通过`onUploadProgress`事件直接处理，而对于已封装的axios，将进度处理函数添加到配置中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在接口真正上传的时候加入当前的上传的进度。

1.如果没有对axios进行封装，可以使用：

 axios({
    method:'post',
    headers: {
        "Content-Type": "multipart/form-data"
    },
    url:"xxx",
    data:form,
    onUploadProgress: progressEvent => {
        this.progressPercent =  Number((progressEvent.loaded / progressEvent.total * 100).toFixed(1))
    }
}).then((res)=>{
   
})

2. 如果对axios进行了封装，则将处理的事件加入到config中

export function UploadFile(data,config,progeressFun) {
    config.onUploadProgress=progeressFun
    return request({
        url: 'xxx',
        method: 'post',
        data,
        config
    })
}

在页面中使用：

   <a-progress :percent="Math.round(loaded/total*100)" />

    progess(progress){
        this.loaded=progress.loaded
        this.total=progress.total
    },
    upload(type,fileItem) {
        ...
        uploadFile(formData,_this.progess).then((response) => {
        ...
        })
    }