vue el-upload文件批量上传，轻松实现文件大小校验，详细教程

2022-12-03 09:13:22

利用 Vue el-upload 组件实现文件批量上传与校验

简介

在现代 Web 开发中，文件上传功能至关重要。Vue el-upload 组件是一个强大的工具，可让您轻松实现文件上传，但对于批量上传和文件大小校验，需要额外的配置。本指南将详细介绍如何使用 Vue el-upload 组件进行批量文件上传并对文件大小进行校验。

安装 Vue el-upload 组件

首先，在终端中输入以下命令安装 Vue el-upload 组件：

npm install vue-upload-component

配置 Vue el-upload 组件

接下来，在您的组件中配置 Vue el-upload 组件：

<el-upload
  action="your_upload_url"
  list-type="text"
  multiple
  :auto-upload="false"
  :on-change="handleFileUpload"
  :before-upload="beforeFileUpload"
  :file-list="fileList"
  :on-remove="handleFileRemove"
>
  <i class="el-icon-upload"></i>
  <div slot="tip" class="el-upload__tip">将文件拖到此处，或单击以选择文件</div>
</el-upload>

action： 指定文件上传的地址。
list-type： 设置文件列表的显示类型。
multiple： 允许用户选择多个文件。
auto-upload： 指定是否自动上传文件。
on-change： 在文件选择发生变化时触发的事件处理函数。
before-upload： 在文件上传之前触发的事件处理函数。
fileList： 存储文件列表数据的响应式对象。
on-remove： 在文件被移除时触发的事件处理函数。

校验文件大小

在 handleFileUpload 方法中，获取用户选择的文件并检查其大小：

handleFileUpload(file, fileList) {
  const fileSize = file.size;
  if (fileSize > 50 * 1024 * 1024) {
    this.$message.error('文件大小不能超过50M');
    return false;
  }

  this.fileList.push(file);
}

如果文件大小超过 50MB，则显示错误消息并返回 false 以阻止上传。

校验文件类型

在 beforeFileUpload 方法中，检查文件类型：

beforeFileUpload(file) {
  const fileType = file.type;
  const allowedFileTypes = ['image/jpeg', 'image/png', 'image/gif'];

  if (allowedFileTypes.indexOf(fileType) === -1) {
    this.$message.error('文件类型不正确');
    return false;
  }

  return true;
}