element plus图片批量上传，且显示进度

### 使用 Element Plus 实现图片批量上传并显示上传进度 #### 配置说明 为了实现图片批量上传功能，并实时展示上传进度，在前端开发中可以借助 `ElUpload` 组件来完成这一需求。此组件允许自定义请求方法，从而能够更好地控制文件传输过程中的细节[^1]。 对于希望追踪多个文件的同时上传情况以及监听其各自进展的应用场景来说，开发者可以通过设置属性 `multiple=true` 来启用多选模式；通过指定事件钩子如 `on-progress`, `on-success`, 和 `on-error` 可以分别捕获到每一个文件上传过程中不同阶段的信息变化[^2]。 下面是一个具体的例子，展示了如何利用上述特性构建一个带有进度条反馈机制的图像批量上载界面： ```html <template> <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :http-request="customUpload" :auto-upload="false"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> <!-- 进度条 --> <el-progress v-if="showProgress" :percentage="progressPercent"></el-progress> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> </template> <script> export default { data() { return { fileList: [], showProgress: false, progressPercent: 0 }; }, methods: { submitUpload() { this.fileList.forEach(file => { const formData = new FormData(); formData.append('file', file.raw); let config = { headers: {'Content-Type': 'multipart/form-data'}, onUploadProgress: (e) => { this.showProgress = true; this.progressPercent = Math.round((e.loaded * 100) / e.total); // 计算当前进度百分比 } }; axios.post('/api/upload', formData, config).then(response => { console.log(response.data.message); this.$message({ message: response.data.message, type: 'success' }); setTimeout(() => {this.resetForm()}, 2000); }).catch(error => { console.error(error.response ? error.response.data.errorMessage : "网络错误"); this.$message.error('上传失败'); }) }); }, resetForm(){ this.fileList=[]; this.showProgress=false; this.progressPercent=0; } handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); }, customUpload(content){ content.onSuccess(); // 自定义上传逻辑时需手动调用 onSuccess 方法结束本次操作 } } } </script> ``` 在这个实例里，当用户选择了要上传的照片之后并不会立刻发送给服务器，而是等待按下按钮后再逐一提交每张照片的数据流至目标地址。在此期间会持续更新界面上方的进度指示器直到全部完成为止。