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

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

   选取文档
   

使用这个参数之后，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
},