el-upload 上传图片文件方法

海胆Sur

已于 2023-04-06 15:52:44 修改

阅读量495

点赞数

分类专栏： web前端文章标签：前端 javascript vue.js

于 2023-03-08 16:24:41 首次发布

本文链接：https://blog.csdn.net/i_fole_you/article/details/128301908

版权

web前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

文章讲述了如何覆盖HTTP请求的默认行为，特别是在上传文件时，设置Content-Type为multipart/form-data并使用FormData处理数据。它提到了使用axios库进行POST请求，并展示了一个使用el-upload组件的Vue.js示例，该组件允许自定义http-request方法来实现文件上传，并提供了校验和显示文件列表的功能。

摘要由CSDN通过智能技术生成

好文链接

覆盖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)
      // 涉及到刷新
    }
  })
}