el-upload组件on-error

### Element UI `el-upload` 组件 `on-error` 事件使用说明 #### 错误处理机制概述 当文件上传过程中遇到服务器返回的状态码不是200或其他预期的成功状态码时，`el-upload`组件会自动触发`on-error`事件。如果服务器响应状态码为200但仍然存在业务逻辑上的错误，则需要通过自定义的方式捕获并处理这些异常情况。 对于HTTP状态码如400、500等情况下的错误处理，在配置`el-upload`时可以指定一个回调函数作为`on-error`属性的值。该回调会在请求失败时被调用，并接收两个参数：一个是代表整个Ajax请求的对象；另一个则是由服务端返回的数据对象[^1]。 ```javascript <template> <div> <!-- ... --> <el-upload :on-error="handleError"> <!-- ... --> </el-upload> </div> </template> <script> export default { methods: { handleError(response, file, fileList) { console.log('An error occurred while uploading:', response); this.$message({ message: 'File upload failed.', type: 'error' }); } } } </script> ``` #### 自定义业务逻辑错误检测 针对即使HTTP状态码为200但仍可能存在业务层面的问题（比如验证未通过），可以在`action`指向的服务接口设计上加入特定字段用于指示操作的结果是否成功以及具体的失败原因。随后利用`before-upload`或`on-success`钩子来进行进一步检查： - **Before Upload Hook**: 在实际发起POST之前先做初步校验； - **On Success Hook**: 即使收到成功的HTTP响应也需再次确认数据的有效性。 一旦发现任何不符合期望的情况即刻抛出相应的警告信息给用户知晓[^2]。 ```javascript // 假设后端约定status=0表示成功,status!=0则携带具体错误描述 methods:{ handleSuccess(response){ if (response.status !== 0){ this.$message.error(`Business Error:${response.message}`); return; } // 正常流程... }, beforeAvatarUpload(file){ const isValidType = ['image/jpeg', 'video/mp4'].includes(file.type); const isLt2M = file.size / 1024 / 1024 < 2; if (!isValidType || !isLt2M ) { this.$message.error('Please select a valid format and size less than 2MB.'); throw new Error(); // 阻止继续执行默认行为 } return true; } } ``` #### 进度条与反馈优化 为了提供更好的用户体验，在发生错误之后除了简单的弹框提醒外还可以考虑结合进度条控件展示更详细的加载过程和最终结果。例如设置布尔型标志位控制进度条可见性和百分比更新频率等][^[^34]. ```html <!-- Progress Bar Component --> <div v-if="videoFlag">{{ videoUploadPercent }}%</div> <button @click="toggleUpload" v-text="isShowUploadVideo ? 'Cancel' : 'Start Upload'" /> ``` ```css /* Some basic styling */ button{ margin-top:.5em; } progress[value]::-webkit-progress-bar { background-color:#eee ; } progress[value]::-webkit-progress-value { background-color:greenyellow; } ``` ```javascript data(){ return { videoFlag:false, videoUploadPercent:"", isShowUploadVideo:true, ... }; }, methods:{ toggleUpload(){ this.isShowUploadVideo=!this.isShowUploadVideo; if(!this.isShowUploadVideo)this.submit(); }, submit(){...},// 实际提交动作 handleError(err,file,fileList){ this.videoFlag=false; this.videoUploadPercent=""; this.$message.error(`${file.name} upload failed.`); } } ```