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


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()
        })


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2024 CODEPRJ.COM