弹指间上传文件，随心所欲设置请求头——Element UI文件上传指南

2023-07-07 16:51:53

Element UI文件上传组件：轻松实现文件上传

Element UI文件上传组件简介

文件上传是现代Web应用程序的关键功能，Element UI文件上传组件以其强大的功能脱颖而出，让开发人员能够轻松实现文件上传。该组件支持：

多文件上传
拖拽上传
自定义上传地址
设置请求头
自定义上传进度条
自定义上传成功/失败提示

使用Element UI文件上传组件

在项目中集成Element UI文件上传组件非常简单，只需安装Element UI并使用<el-upload>标签即可。例如：

<el-upload
  action="https://example.com/upload"
  list-type="picture-card"
  :multiple="true"
  :auto-upload="false"
>
  <i class="el-icon-plus"></i>
</el-upload>

设置请求头

要设置请求头，可以在<el-upload>标签中使用headers属性：

<el-upload
  action="https://example.com/upload"
  list-type="picture-card"
  :multiple="true"
  :auto-upload="false"
  :headers="{ 'Content-Type': 'multipart/form-data' }"
>
  <i class="el-icon-plus"></i>
</el-upload>

获取上传进度

通过<el-upload>标签的on-progress事件，可以获取上传文件的进度：

<el-upload
  action="https://example.com/upload"
  list-type="picture-card"
  :multiple="true"
  :auto-upload="false"
  @on-progress="handleProgress"
>
  <i class="el-icon-plus"></i>
</el-upload>

限制上传文件类型

可以通过<el-upload>标签的accept属性来限制上传文件的类型：

<el-upload
  action="https://example.com/upload"
  list-type="picture-card"
  :multiple="true"
  :auto-upload="false"
  :accept="'.jpg,.png,.gif'"
>
  <i class="el-icon-plus"></i>
</el-upload>

自定义上传成功/失败提示

通过<el-upload>标签的on-success和on-error事件，可以自定义上传成功/失败提示：

<el-upload
  action="https://example.com/upload"
  list-type="picture-card"
  :multiple="true"
  :auto-upload="false"
  @on-success="handleSuccess"
  @on-error="handleError"
>
  <i class="el-icon-plus"></i>
</el-upload>

常见问题解答

如何获取上传文件的名称？

this.$refs.upload.fileList.map(file => file.name);

如何设置最大文件大小？

<el-upload
  action="https://example.com/upload"
  list-type="picture-card"
  :multiple="true"
  :auto-upload="false"
  :max-size="2097152"  // 2 MB
>
  <i class="el-icon-plus"></i>
</el-upload>

如何禁用拖拽上传？

<el-upload
  action="https://example.com/upload"
  list-type="picture-card"
  :multiple="true"
  :auto-upload="false"
  :drag="false"
>
  <i class="el-icon-plus"></i>
</el-upload>

如何自定义上传按钮？

<el-upload
  action="https://example.com/upload"
  list-type="picture-card"
  :multiple="true"
  :auto-upload="false"
  :upload-file-list="[]"
  :show-upload-list="false"
>
  <button class="el-button el-button--primary">
    <i class="el-icon-upload"></i>
    上传
  </button>
</el-upload>