【vue2+elementui】记录el-upload文件上传时调接口传参的几种情况

文件上传的接口请求头

headers: { "Content-Type": "multipart/form-data" },

自动上传

el-upload上传文件调接口的时候默认会带有一个入参file: 原生的file对象

无额外入参

action属性指定了文件上传的接口地址
auto-upload属性：是否在选取文件后立即上传，默认值true
所以只要设置了这两属性，文件在选择后（或拖拽到上传区域后）会自动上传到 action 属性指定的地址，默认入参是file。

<div class="batch-import-contain">
  <el-button type="primary" size="mini">下载模板</el-button>
  <el-upload
    class="upload-demo"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    :auto-upload="true"
    :accept="accept"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      <p>点击或将文件拖拽到这里上传</p>
      <p>支持扩展名：.xls .xlsx .csv .et .ett .xlt...</p>
    </div>
  </el-upload>
</div>

export default {
   
  name: 'batchImport',
  data() {
   
    return {
   
      accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',
    }
  },
}

有额外入参

但如果还有额外的入参，就要用到http-request属性：覆盖默认的上传行为，可以自定义上传的实现
action的值可以设置为#或其他占位符，因为实际请求会在http-request中处理

<div class="batch-import-contain">
  <el-button type="primary" size="mini">下载模板</el-button>
  <el-upload
    class="upload-demo"
    drag
    action="#"
    :accept="accept"
    :auto-upload="true"
    :http-request=