el-upload 上传图片文件方法

好文链接

覆盖action的默认请求行为是必要的 http-request，自定义上传方法

Content-Type 设置成 form-data

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryBicOUjQSEgA1dSB1

以 formData 格式处理data

let files = new FormData()
files.append('file', xxxfile)
// 发起 post 请求
function uploadapi(data) {
  return axios.post('url', {headers:{'Content-Type':'multipart/form-data'}})
}

使用 el-upload 组件做上传交互

<el-upload
  action="#"
  ref="upload"
  accept=".xls,.xlsx" 
  :show-file-list="false"
  :http-request="upload"
>
  <el-button
    type="text"
    icon="el-icon-upload"
    style="float: right"
  >上传附件
  </el-button>
</el-upload>

upload(param) {
  const data = new FormData()
  data.append('file', param.file) // 'file'为name 需规定清楚
  uploadapi(data).then(res => {
    if (res.success) {
      this.$message.success(res.message)
      // 涉及到刷新
    }
  })
}

插槽

• default 自定义默认内容
• trigger 触发文件选择框的内容
• tip 提示说明文字
• file 缩略图模板的内容 { file: UploadFile }

格式需要在上传前进行校验 before-upload
accept 仅在文件选择时自动筛选，可被手动取消

显示文件列表 file-list
自动上传 auto-upload

默认方法是单个文件提交的