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