vue3+ vite+ element plus 上传组件

Vue3 + Vite + Element Plus 的组合是一个现代前端框架的搭配，可以快速构建高效、响应式的 web 应用程序。Element Plus 是基于 Vue 的一套优秀的 UI 组件库，它提供了丰富的组件，包括文件上传组件。

在 Vue 中，你可以通过 Element Plus 的 `el-upload` 组件轻松实现文件上传功能。以下是基本步骤：

1. **安装依赖**:
- 首先，在你的项目目录中运行 `npm install element-plus@latest` 或者 `yarn add element-plus` 来安装 Element Plus。

2. **引入组件**:
在需要使用上传组件的组件模板中，导入 `ElUpload` 和可能需要的其他样式：

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

   <template>
     <div>
       <el-upload
         :action="uploadUrl"
         :on-success="handleSuccess"
         :before-upload="beforeUpload"
         ref="upload"
       >
         <!-- 选择文件按钮 -->
         <i class="el-icon-upload"></i> 选择文件
       </el-upload>
     </div>
   </template>

3. **配置选项**:
- `action`: 文件上传的服务器地址。
- `before-upload`: 上传前的钩子，用于验证文件等操作。
- `handleSuccess(response, file)` 或者 `onSuccess(file, fileList)`: 上传成功后的回调，处理服务器返回的数据以及文件信息。

4. **事件处理**:
可能还会需要一些额外的事件监听，例如取消上传 (`fileList` 和 `file`) 或者处理文件列表 (`fileList`)

import { ref } from 'vue';

// 示例变量
const uploadUrl = ref('http://your-api-url/upload');
const beforeUpload = (file) => {
  // 这里可以做些预检查
  return true;
};
const handleSuccess = (response, file) => {
  console.log('上传成功', response);
};

// 使用...