zoukankan      html  css  js  c++  java
  • 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()
            })
    
  • 相关阅读:
    go2基本类型
    go1
    android studio 使用
    ios34---GDC,dispatch_once
    ios33--线程通信
    ios33--线程安全
    ios32---线程的状态
    ios31--NSThread
    ios30---pthread, NSThread, GCD, NSOperation
    ios29--多线程
  • 原文地址:https://www.cnblogs.com/xinghan/p/10554726.html
Copyright © 2011-2022 走看看