创建项目Vue 3 + Vite，引入 Element Plus UI 组件库。

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` 和可能需要的其他样式： ```html <script setup> import { ElUpload } from &#39;element-plus/upload&#39;; </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`) ```js import { ref } from &#39;vue&#39;; // 示例变量 const uploadUrl = ref(&#39;http://your-api-url/upload&#39;); const beforeUpload = (file) => { // 这里可以做些预检查 return true; }; const handleSuccess = (response, file) => { console.log(&#39;上传成功&#39;, response); }; // 使用... ```