el-upload上传文件失败自定义

### 实现 `el-upload` 组件的自定义错误处理 为了有效管理文件上传过程中的异常情况，在使用 Element UI 的 `el-upload` 组件时，可以利用其内置的钩子函数来进行定制化开发。当遇到上传失败的情况，主要依赖于 `on-error` 钩子来捕获服务器返回的状态码或者网络请求过程中发生的任何问题。 对于希望阻止默认行为并执行特定逻辑的需求，可以在 `on-error` 方法内部编写相应的业务代码。如果发现即使设置了该回调仍然无法正常触发，则可能是由于配置不当或其他因素引起的[^1]。 针对上述提到的现象——即尽管指定了 `action="#"` 并关闭了自动上传功能 (`auto-upload=false`) 后依旧尝试向不存在的动作地址发起请求的问题，这通常是因为浏览器会按照 HTML 标准对待 `<form>` 表单内的 `<input type="file">` 元素的行为所致；而 `el-upload` 底层正是基于此构建而成。因此建议开发者通过 JavaScript 手动控制整个流程，而不是依靠框架本身提供的简化方式[^2]。 具体到 Vue 项目中，可以通过监听 `change` 事件获取选中的文件对象，并借助 Axios 或 Fetch API 发起 AJAX 请求至目标服务端点。与此同时，记得清除原有的 `action` 属性值以防止不必要的 HTTP 调用发生。另外需要注意的是，一旦采取这种方式实现手动上传机制，那么像 `on-success`, `on-error` 这样的生命周期钩子就不再适用了，取而代之的是要关注 Promise 对象的成功与否状态[^3]。 ```javascript // 假设已经安装并引入 axios 库 import axios from 'axios'; export default { methods: { handleFileChange(file, fileList) { const formData = new FormData(); formData.append('file', file.raw); axios.post('/api/upload', formData) .then(response => { console.log('Upload succeeded:', response.data); this.$message({ message: '文件上传成功', type: 'success' }); }) .catch(error => { console.error('There was an error uploading the file!', error); this.$message.error('文件上传失败'); }); } } } ``` #### 处理上传失败后的用户体验优化 考虑到实际应用场景下可能存在的各种意外状况，除了简单的提示信息外，还可以进一步增强交互体验： - 提供重试按钮让用户能够重新发送相同的文件； - 显示详细的错误描述帮助定位原因（比如超出了最大尺寸限制、格式不符等）； - 记录日志以便后续排查分析。 以上措施有助于提高系统的健壮性和友好度，使得即便面对复杂多变的操作环境也能保持良好的可用性。