更改el-upload的上传事件

### 自定义 `el-upload` 组件的上传事件 在 Vue.js 和 Element UI 中，可以通过配置项和自定义函数来实现对 `el-upload` 组件上传事件的修改。以下是详细的说明： #### 配置项介绍 - **action**: 这是一个必填字段，表示文件上传的目标 URL 地址[^1]。 - **beforeUpload**: 文件上传前的钩子函数，返回 false 或者 Promise.reject() 可阻止上传[^3]。 - **httpRequest**: 替代默认的上传行为，允许手动发送请求[^4]。 #### 实现方式 如果需要完全控制上传过程，可以使用 `httpRequest` 属性来自定义上传逻辑。下面提供了一个完整的例子： ```vue <template> <div> <!-- el-upload 组件 --> <el-upload class="upload-demo" action="" :before-upload="handleBeforeUpload" :http-request="customHttpRequest" :on-success="handleSuccess" :on-error="handleError"> <el-button type="primary">点击上传</el-button> </el-upload> </div> </template> <script> export default { methods: { // 上传前校验 handleBeforeUpload(file) { const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('上传文件大小不能超过 2MB!'); } return isLt2M; // 返回 true 表示继续执行上传流程，false 则中断 }, // 自定义上传逻辑 customHttpRequest(option) { const { file, onSuccess, onError } = option; // 创建 FormData 并附加其他参数 let formData = new FormData(); formData.append("file", file); // 添加文件对象 formData.append("otherParam", "test"); // 添加额外参数 // 发送 AJAX 请求 (这里以 axios 为例) this.axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' }, }) .then(response => { onSuccess(response.data); // 成功回调 }) .catch(error => { onError(error); // 错误回调 }); }, // 处理成功响应 handleSuccess(response, file, fileList) { console.log('上传成功:', response); this.$message.success('文件上传成功'); }, // 处理错误响应 handleError(err, file, fileList) { console.error('上传失败:', err); this.$message.error('文件上传失败'); } } }; </script> ``` 在这个例子中： - `handleBeforeUpload`: 在文件上传之前进行验证，确保文件满足条件后再提交。 - `customHttpRequest`: 完全替代默认的上传行为，允许开发者自由定制上传逻辑[^4]。 - `handleSuccess` 和 `handleError`: 分别处理上传成功的反馈以及上传失败的情况。 #### 常见问题解决 当遇到类似于 `Uncaught TypeError: Cannot set property ‘status’ of null` 的错误时，通常是因为在某些生命周期阶段尝试访问未初始化的对象所致[^2]。建议检查以下几点： - 确认是否正确设置了 `beforeUpload` 方法并进行了必要的过滤。 - 如果涉及异步操作，请确保所有依赖的数据都已加载完成再发起请求。 --- ###