关于前端:文件上传elupload使用自定义httprequest不显示默认的进度条

最近在我的项目中，应用了elementUI的<el-upload>做上传文件，应用自定义:http-request的时候不显示默认的进度条。

其实这个问题有两种解决方案，一种是在action中间接写上要上传门路的url，而后在on-success中获取返回值的门路（保留到服务器中，会返回url的门路地址）；另一种办法就是自定义进度条，也就是在:http-request后追加进度条

    <el-form-item ref="uploadElement" prop="fileUpdate" label="上传文件">
          <el-upload
            class="upload-demo"
            action="123"
            :http-request="uploadSectionFile"
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            accept=".apk"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            </div>
            <el-progress style="width: 200px;margin-top: 8px" :text-inside="true" :stroke-width="20" :percentage="progressPercent" />
          </el-upload>
        </el-form-item>

    data() {
        return {
            progressPercent: 0, // 进度条默认为0
        }
    }

methods: {
    /**
     *  自定义上传图片的办法
     */
    uploadSectionFile(params) {
      // 上传新文件时，将进度条值置为零
      this.progressPercent = 0

      const file = params.file
      this.ruleForm.packageSize = (file.size / (1024 * 1024)).toFixed(2) + 'M' // 文件大小，转化成M
      this.forms = new FormData() // 实例化一个formData，用来做文件上传
      this.forms.append('file', file)
      // 将图片独自上传，并返回门路
      // 进度条
     const uploadProgressEvent = progressEvent => {
        this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
      }
      uploadFile(this.forms, uploadProgressEvent).then(res => {
        if (res.code === 200) {
          this.ruleForm.packageUrl = res.data.packageUrl
          this.$refs.uploadElement.clearValidate() // 如果上传文件胜利，就把必填校验动静移除
        }
      }).catch(response => {
        console.log('文件上传失败')
      })
    },
}

最重要的是这个

const uploadProgressEvent = progressEvent => {
            this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
}
      

而后在接口中，将参数传过来

export function uploadFile(obj, onUploadProgress) {
  return request({
    url: '上传的门路',
    method: 'POST',
    data: obj,
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress
  })
}