element-ui 上传组件自定义上传没有进度条解决方法

最新推荐文章于 2024-10-18 09:59:29 发布

weixin_30522095

最新推荐文章于 2024-10-18 09:59:29 发布

阅读量1.9k

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/xinghan/p/10554726.html

版权

Upload 上传组件自定义上传

使用http-request属性覆盖默认的上传行为，会向自己定义的方法传入一个当前上传实例，
要显示进度条就需要手动调用onProgress(e)方法

{
    action:""
    data:undefined
    file:File
    filename:"file"
    headers:Object
    onError:onError(err)
    onProgress:onProgress(e)
    onSuccess:onSuccess(res)
    withCredentials:false
}

实现进度条代码（这里贴出axios的代码）

let form = new FormData();  
//uploader为之前提到的实例
form.append("file", uploader.file);
axios .post(url,form, {
          headers: {
            "Content-Type": "multipart/form-data"
          },
          onUploadProgress: progressEvent => {
            let percent=(progressEvent.loaded / progressEvent.total * 100) | 0
            //调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
            uploader.onProgress({percent:percent})
          }
        }).then((res)=>{
            //上传成功 调用onSuccess方法，否则没有完成图标
            //处理自己的逻辑
          uploader.onSuccess()
        }).catch((err)=>{
            //上传失败 调用onError方法
            //处理自己的逻辑
            uploader.onError()
        })

转载于:https://www.cnblogs.com/xinghan/p/10554726.html