【Vue3 + Element-Plus】 el-upload 组件批量上传图片问题记录

<< 在 Vue3 和 Element Plus 中使用 `el-upload` 组件上传文件并展示进度条是一个常见的需求。以下是如何实现的具体步骤： ### 实现步骤 #### 1. 安装依赖 确保已安装 Vue3 和 Element Plus，如果未安装可以通过以下命令完成： ```bash npm install element-plus ``` #### 2. 引入组件 在项目中引入 `ElUpload` 或者完整地按需加载 Element Plus。 ```javascript // main.js import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import ElementPlus from &#39;element-plus&#39;; import &#39;element-plus/dist/index.css&#39;; const app = createApp(App); app.use(ElementPlus);app.mount(&#39;#app&#39;); ``` #### 3. 使用 el-upload 展示进度条 `el-upload` 提供了 `on-progress` 钩子方法用于监听上传过程中的进度变化，结合 `percentage` 参数可以在 UI 上显示上传百分比。 ```vue <template> <div> <!-- 文件上传 --> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-progress="handleProgress" :before-upload="beforeAvatarUpload"> <el-button type="primary">点击上传</el-button> <template #tip> <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </template> </el-upload> <!-- 进度条 --> <el-progress v-if="progressPercent > 0" :percentage="progressPercent"></el-progress> </div> </template> <script> export default { data() { return { progressPercent: 0, // 当前上传进度 }; }, methods: { handleProgress(event) { this.progressPercent = parseInt(event.percent); // 更新进度值 }, beforeAvatarUpload(file) { const isJPGorPNG = file.type === "image/jpeg" || file.type === "image/png"; const isLt500K = file.size / 1024 < 500; if (!isJPGorPNG) { this.$message.error("仅支持上传 JPG/PNG 格式的图片!"); } if (!isLt500K) { this.$message.error("上传头像图片大小不能超过 500KB!"); } return isJPGorPNG && isLt500K; }, }, }; </script> <style scoped> .upload-demo { margin-bottom: 20px; } </style> ``` #### 关键点解释 - **action**: 设置为服务器端接收上传请求的地址。 - **on-progress**: 在每次上传进度发生变化时触发，参数包含当前的百分比信息。 - **before-upload**: 可对上传之前的文件进行校验或预处理操作（如检查类型和大小）。 --- ### 总结 以上代码展示了如何通过 `el-upload` 结合 `el-progress` 来监控文件上传状态，并实时更新进度条。 ---