文件上传实时获取上传进度（axios）

文件上传实时获取上传进度（axios）

 frontBeforeUploadVideo: function (file) {
        return false;
      },
      // 上传 change
      frontHandleChangeVideo(info) {
        const formData = new FormData()
        formData.append('file', info.file)
        formData.append('token', "token")
        this.saveFile(formData)
      },
      saveFile(formData) {
        this.confirmLoading = true
        this.axios({
          method: 'post',
          url: '/common/upload_file',
          headers: {},
          onUploadProgress(e){
            if(e.lengthComputable){
              console.log('上传进度',e.loaded / e.total); //已上传的比例
            }
          },
          params: {},
          data: formData
        }).then((response) => {
          let that = this;
          this.details.url = response.result.url;
          this.fileSize = response.result.size;
          // 添加定时器解决 that.$refs.video.duration无法获取 NaN
          setTimeout(() => {
            that.$nextTick(() => {
              if (that.details.url) {
                that.timeLength = that.$refs.video.duration;
                this.form.setFieldsValue({
                  duration: that.timeLength,
                });
                that.$refs.video.src = response.result.url;
                this.$message.success("上传成功");
              }
            })
          }, 800)


          this.confirmLoading = false
        }).catch((error) => {
          this.$message.error("上传失败，请重试");
          this.confirmLoading = false
        })

      },