vue-ant-design 使用自定义上传（customRequest）无法显示进度条

Question

问题描述

项目中需要自定义上传，除了上传file文件还需要上传其他字段

问题出现的环境背景及自己尝试过哪些方法

尝试使用vue-ant-design 的upload customRequest 方法，将formData 通过自己的接口发送，成功是成功了，但是进度条不显示

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<a-upload-dragger

    class="upload_file"
    name="file"
    :multiple="false"
    action="/ats/candidates/resume/fileSave"
    :customRequest="customRequest"
    :beforeUpload="beforeUpload"
    :headers="{'Content-Type': 'application/x-www-form-urlencoded'}"
    :showUploadList="showUploadList"
    :fileList="fileList"
    :remove="removeFile"
    @change="uploadChange">
    <p class="ant-upload-drag-icon">
      <a-icon type="upload" />
    </p>
    <p class="ant-upload-text">点击或拖拽文件到此处</p>
  </a-upload-dragger>
  uploadChange (info) {
  console.log(info)
  let fileList = info.fileList
  fileList = fileList.slice(-1)
  if (info.file.status !== 'uploading') {

  }
  if (info.file.status === 'done') {
  } else if (info.file.status === 'error') {
  }
  this.fileList = fileList
},
async customRequest (data) {
  const formData = new FormData()
  formData.append('file', data.file)
  formData.append('hrSitType', this.createCandidate.channel.id)
  formData.append('positionId', this.createCandidate.position.id)
  data.onProgress()
  let res = await resumeFileSave(formData)
  console.log(data)
  this.resCb(res, (res) => {
    if (res.code === 1116) {
      data.onError()
    } else if (res.code === 1117) {
      data.onSuccess()
    } else if (res.code === 1500) {
      data.onError()
    } else if (res.code === 200) {
      data.onSuccess()
    } else {
      data.onError()
    }
  })
},
removeFile (e) {
  console.log(e)
  return true
},
beforeUpload (file, fileList) {
  const reg = /\.(doc|docx|html|pdf|txt|mht|jpg|png|zip)(\?.*)?$/
  return new Promise((resolve, reject) => {
    if (reg.test(file.name)) {
      resolve()
    } else {
      this.$message.error(`请上传正确的文件格式`)
      reject(new Error('请上传正确的文件格式'))
    }
  })
}

你期待的结果是什么？实际看到的错误信息又是什么？

如何才能显示进度条呢？

题目描述

题目来源及自己的思路

Answer 1

给options.onProgress传递{percent: 进度百分比}对象即可。。

options.onProgress( {percent: 进度百分比} )

async handleUpload (options) {
  const opt = options
  const formData = new FormData()
  formData.append('file', options.file)

  let progress = { percent: 1 }


  const intervalId = setInterval(() => {
    if (progress.percent < 100) {
      progress.percent++
      options.onProgress(progress)
    } else {
      clearInterval(intervalId)
    }
  }, 100)

Answer 2

一直显示loading 怎么处理呢

Answer 3

楼主解决了吗 怎么能显示进度条呢