el_upload vue 多文件上传

在Vue中实现多文件上传可以使用`el-upload`组件，以下是一个例子：

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-url"
    multiple
    :on-success="handleUploadSuccess"
    :before-upload="beforeUpload"
    :limit="3"
    :auto-upload="false"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3个</div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleUploadSuccess(response, file, fileList) {
      // 文件上传成功的回调函数
      console.log(response, file, fileList);
    },
    beforeUpload(file) {
      // 文件上传前的处理，可以校验文件类型、大小等
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJPG) {
        this.$message.error('只能上传jpg/png文件');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('文件大小不能超过2MB');
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

在上面的代码中，`el-upload`组件提供了多个属性来实现多文件上传的功能：

- `action`：指定文件上传的URL。
- `multiple`：是否支持多选文件。
- `on-success`：文件上传成功后的回调函数。
- `before-upload`：文件上传前的处理函数，可以在这里进行文件校验。
- `limit`：限制上传文件的数量。
- `auto-upload`：是否自动上传文件。

需要注意的是，根据你的实际需求，你需要修改`action`属性来指定你的后端接口地址，以及根据你的文件类型和大小的限制来修改`beforeUpload`方法中的校验逻辑。