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()
            })
    
  • 相关阅读:
    UV动画
    使用RampTexture实现BRDF效果
    使用RampTexture来控制diffuse shading
    Half Lambert
    Lamber算法 & SurfaceShader自定义光照
    What is _MainTex_ST ?
    C# Enum,Int,String的互相转换
    Plugins in Unity
    Mono在Full AOT模式下的限制
    雾化
  • 原文地址:https://www.cnblogs.com/xinghan/p/10554726.html
Copyright © 2011-2022 走看看