el-upload的两种方式

el-upload的两种上传方式

• 常规：通过 action 和 on-success 等
• 特殊：通过 http-request ，覆盖默认的上传行为，可以自定义上传的实现

action方式

<!--  action方式主要用到的是以下四个参数|方法：action、headers、data、on-success -->
<el-upload

  :action="action"
  :headers="uploadHeaders"
  :data="uploadData"
  :on-success="handleSuccess"
  
  :before-upload="beforeUpload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :limit="1"
  :on-exceed="handleExceed"
  :file-list="fileList"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">{{ tip }}</div>
</el-upload>


handleSuccess(res, file) {
  if (res.code === 1) {
    ···
  } else {
    this.$message.error(`上传失败：${res.message}`)
  }
},

基本上是通过 action 控制上传接口，on-success 来控制上传成功之后的回调

优缺点：

• 优点：属于elementUI设计的本来用法，各个属性各司其职
• 缺点：接口的axios是单独的，headers和接口返回状态的判断都需要单独写

http-request方式

<el-upload

  action="/"
  :http-request="uploadFile"
  
  :before-upload="beforeUpload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :limit="1"
  :on-exceed="handleExceed"
  :file-list="fileList"
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">{{ tip }}</div>
</el-upload>

// 处理其他参数
handleOtherParams(params) {
  const formData = new FormData()
  if (typeof params === 'object' && params) {
    Object.keys(params).forEach(k => {
      formData.append(k, params[k])
    })
  }
  return formData
},
uploadFile(ops) {
  const _file = ops.file

  const formData = this.handleOtherParams({
    file: _file
    // 这里也可以写其他参数
  })

  // 调用接口 - 这里就可以使用全局统一axios处理之后的接口
  uploadUrl(formData).then((res) => {
    this.$message.success(res.message || '文件导入成功，稍后查询处理结果')
  }).catch((err) => {
    throw err
  })
},

单独的上传行为，自定义上传

优缺点：

• 优点：可以使用全局axios处理之后的接口，避免引入headers和处理返回状态
• 缺点：由于全局请求拦截已经做了统一处理，所以发生错误的时候不好单独处理（例如全局处理错误是弹错误消息，这里想不弹全局的，弹自己的错误消息格式，就比较困难）