天天看点

vue+element 表单上传进度条

项目中用到了若依的框架,我们表单提交的时候需要展示提交进度(因为有大文件上传)

为了解决这个问题,找了好多的资料,终于找到了最简单的方法

在确认提交的方法中

// 获取文件上传的进度
let config = {
    onUploadProgress: progressEvent => {
        let complete = parseInt(progressEvent.loaded / progressEvent.total * 100)
        this.fileForm.percentage = complete
    }
}
API.uploadFile(data,oMyForm,config).then(res => {
    ......
});
           

在封装的js中

//上传文件
export function uploadFile(data,oMyForm,config) {
    let axiosConfig = {
        url: `api/file/upload?proId=${data.proId}`,
        method: 'post',
        data:oMyForm
    }
    if(config instanceof Object){
        for (let key in config) {
            axiosConfig[key] = config[key]; 
        }
    }
    return request(axiosConfig)
}
           

展示

vue+element 表单上传进度条
vue+element 表单上传进度条
上一篇: vue-轮播