欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

antd of vue 利用customRequest自定义渲染上传进度条

程序员文章站 2022-06-16 12:33:23
antd of vue 上传进度条显示在a-upload组件中使用customRequest自定义渲染 ...

antd of vue 上传进度条显示

  1. 在a-upload组件中使用customRequest自定义渲染

                       <a-upload
                         name="file"
                         :customRequest="customRequest" //通过覆盖默认的上传行为,可以自定义自己的上传实现(Function)
                       >                  
                           <a-button icon="upload"> 文件上传</a-button>
                    </a-upload>
                       <p>   </p>//预留空间
    
  2. data中注册

     customRequest:null
    
  3. created里写方法

created () {
        const _this = this
        this.customRequest = function (options) {
          let params = new FormData();
          params.append("file", options.file);
          // 发送请求
          debugger
          axios.post((process.env.VUE_APP_API_BASE_URL + '/system/file/upload'), params, {headers: {token: Vue.ls.get(ACCESS_TOKEN)}}).then((res)=>{
                debugger
                options.onSuccess(res, options.file) //解决一直loading情况,调用onSuccess
                var fileInfo = res.data.data
                fileInfo.action = '删除'
                // 赋值给数组在table中显示上传列表
                _this.bgData.push(fileInfo)
                _this.fileIds.push(fileInfo.id)
                _this.openFile = true
                // 在上传成功后进度条显示为99
                progress.percent = 99
                debugger
                _this.$message.success(`${res.data.data.name} 上传成功`)//上传成功显示
          })
          let progress = { percent: 1 }
          let speed = 100/(options.file.size/65000)//上传速度
          const intervalId = setInterval(() => {
            debugger
            // 控制进度条防止在未上传成功时进度条达到100
            if (progress.percent < 99 && progress.percent+speed < 100 ) {
              progress.percent+=speed//控制进度条速度
              options.onProgress(progress)//onProgress接收一个对象{ percent: 进度 }在进度条上显示
            } else if((progress.percent = 99) ) {
              progress.percent++
            } else if (progress.percent=100){
              clearInterval(intervalId)
            }
          }, 100)
      };
  1. 效果图
    antd of vue 利用customRequest自定义渲染上传进度条

本文地址:https://blog.csdn.net/qq_42068550/article/details/107543044

相关标签: Vue antd upload