antd of vue 利用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)
      };

4. 效果图
   

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