el-upload批量上传文件

el-upload 是 Element UI 中的一个组件，用于文件上传。它支持单个文件上传和批量文件上传。批量上传时，可以选择多个文件，也可以拖动多个文件一起上传。同时，el-upload 也提供了多种事件和方法，方便我们在上传过程中进行相关操作，如上传前的校验、上传成功后的回调等。

以下是 el-upload 批量上传文件的使用方法：
1. 在 Vue 组件中引入 el-upload 组件：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :multiple="true"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
  export default {
    methods: {
      // 上传前的校验
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt500K = file.size / 1024 < 500;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt500K) {
          this.$message.error('上传头像图片大小不能超过 500KB!');
        }

        return isJPG && isLt500K;
      },

      // 预览文件
      handlePreview(file) {
        console.log('预览', file);
      },

      // 删除文件
      handleRemove(file, fileList) {
        console.log('删除', file, fileList);
      }
    }
  }
</script>

2. 通过设置 `:multiple="true"` 来开启批量上传功能；
3. 可以通过 `:before-upload` 方法来实现上传前的校验，并在校验失败时给出错误提示；
4. 可以通过 `:on-preview` 方法来实现预览文件功能；
5. 可以通过 `:on-remove` 方法来实现删除文件功能。