搞定文件上传！Vue+ElementUI实现文件格式、大小和数量限制，表单和Excel一起传

2023-04-17 14:46:31

使用 Vue.js 和 ElementUI 实现文件上传：限制和表单集成

前言

在当今以数据为中心的时代，文件上传已成为许多 web 应用程序中一项必不可少的特性。Vue.js，一个流行的前端框架，提供了强大的工具来简化文件上传流程。结合 ElementUI，一个流行的 UI 库，您可以轻松限制上传的文件并将其与表单数据一起提交。

限制上传文件

ElementUI 的 el-upload 组件提供了一系列属性来限制上传的文件。以下是您需要了解的几个关键属性：

accept：限制文件格式
- 使用此属性，您可以指定要允许上传的文件类型，例如图像、视频或特定文件扩展名。
multiple：限制文件数量
- 此属性决定了用户是否可以一次上传多个文件。
size：限制文件大小
- 通过设置此属性，您可以限制每个上传文件的大小，以防止过度占用服务器空间。

代码示例：

<el-upload
  action="your_upload_url"
  accept="image/*"
  multiple="false"
  size="10 * 1024 * 1024"
>
  <button>选择文件</button>
</el-upload>

表单集成

除了限制文件，您还可以将上传的文件与其他表单数据一起提交给后端。为此，请使用 el-upload 组件的 file-list 属性。

代码示例：

<el-upload
  :file-list="fileList"
  action="your_upload_url"
>
  <button>选择文件</button>
</el-upload>

<el-form :model="formData">
  <!-- 表单字段 -->
  <el-button @click="submitForm">提交</el-button>
</el-form>

// 获取上传的文件列表
const formData = new FormData();
this.fileList.forEach((file) => {
  formData.append('file', file.raw);
});
// 然后，您可以使用 Axios 或您喜欢的库向后端发送表单数据：
axios.post('your_submit_url', formData)
  .then(res => {
    // 处理后端响应
  })
  .catch(err => {
    // 处理错误
  });