vue3中a-upload多文件上传

在 Vue3 中，`element-plus`库中的 `a-upload` 组件是一个用于处理文件上传的功能组件。它允许用户选择单个文件或多文件上传，并提供了诸如进度追踪、错误处理等功能。以下是基本使用 `a-upload` 进行多文件上传的一般步骤：

1. 安装依赖：首先确保你在项目中已经安装了 `@element-plus/upload` 包，如果没有可以使用 npm 或者 yarn 进行安装：

   npm install @element-plus/upload --save

2. 引入并注册组件：在你的组件中导入 `Upload` 组件和相关的样式：

   <script setup>
       import { Upload } from '@element-plus/upload';
   </script>

   <template>
     <el-upload
         ref="upload"
         :action="uploadUrl"
         :multiple="true" <!-- 表示支持多选文件 -->
         :on-change="handleChange"  <!-- 文件变化事件 -->
         :before-upload="beforeUpload"  <!-- 文件上传前的钩子 -->
         :on-success="handleSuccess"  <!-- 文件上传成功的回调 -->
         :on-error="handleError"      <!-- 文件上传失败的回调 -->
         class="upload-demo"
     >
         <el-button slot="trigger">点击上传</el-button>
         <el-button style="display: none;">取消</el-button>
     </el-upload>
   </template>

3. 配置事件处理器：定义 `handleChange`, `beforeUpload`, `handleSuccess`, 和 `handleError` 函数来处理相应的生命周期事件。例如：

   const handleFileChange = (files) => {
       // 处理文件列表变化
       console.log(files);
   };

   const beforeUpload = (file) => {
       // 检查文件是否可以上传
       if (/* file.type不符合规定 || 文件大小超过限制 */) {
           return false;
       }
       return true;
   };

   const handleSuccess = (response, file) => {
       // 接收服务器返回的数据，处理成功上传后的逻辑
       console.log(response, '文件上传成功');
   };

   const handleError = (error, file) => {
       // 错误处理，如显示错误信息
       console.error('文件上传失败', error);
   };