element-ui upload组件覆写默认上传行为

使用 http-request 参数来自定义上传行为

<el-upload
   ref="upload"
   :show-file-list="false"
   :on-success="handleUploadSuccess"
   :on-progress="handleUploading"
   :http-request="upload"
   class="upload-demo"
   accept=".doc, .docx, .ppt, .pdf"
   action="">
   <el-button slot="trigger" size="small" type="primary">选取文档</el-button>
   <el-progress v-show="docFlag" :percentage="docPercentage" style="margin-top: 30px;"/>
</el-upload>

使用这个参数之后，on-success，和on-progress就不起作用了，可以这样做

upload(fileObj) {
  var formData = new FormData()
  formData.append('file', fileObj.file)
  uploadDoc(formData, fileObj).then(function(res) {
    fileObj.onSuccess(res.payload.file[0])   // 接口返回成功时处理，调用onSuccess
  })
},

这里使用axios的一个封装，执行上传

export function uploadDoc(data, fileObj) {
  return request({
    url: '/rest/upload',
    method: 'post',
    data,
    headers: { 'Content-Type': 'multipart/form-data' },
    timeout: undefined,
    onUploadProgress: progressEvent => {
      const complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
      fileObj.onProgress({ percent: complete })     //调用upload组件的 onProgress
    }
  })
}

显示进度

handleDocUploading(obj) {
	 this.docFlag = true
	 this.docPercentage = obj.percent
},

上传成功后的回调

handleUploadDocumentSuccess(res, file) {
  this.docFlag = false
  this.docPercentage = 0
},