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

最新推荐文章于 2025-05-19 11:35:48 发布

原创

最新推荐文章于 2025-05-19 11:35:48 发布 · 3.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

使用 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' }