商城网站建设服务网络推广公司北京
el-upload组件方法失效
- 问题
- 原因
- 解决
问题
使用el-upload组件上传文件，有这么一个问题上传文件处理报错Excel、Word。org.apache.poi.openxml4j.exceptions.OLE2NotOfficeXmlFileException。
按上述，后端编写完代码，输出正常，但是预期在后端抛出错时前端能够有提示。
就希望能够在前端发起“提交/确定”的方法里面有一个catch怎么的，可以在方法抛出异常/报错时能够给到一个地方写代码，但是项目使用的el-upload默认提交，没有一个类似.catch(() => {})暴露出来可以处理的方法。
好在el-upload官方有一些方法如下：
但是我在:on-error="handleUploadError"方法中写了处理还是没有生效（后端抛异常，前端给提示）。
原因
项目后端对响应封装处理，http响应码是200，手动将抛异常的响应code置500，作为response返回。
这个时候前端不知道你是抛出异常返回的，而是认为请求时被成功处理的，故在组件el-upload识别不到是上传出错，:on-error的方法也不能执行。
解决
在el-upload中其他的方法手动判断，比如在:on-success="handleFileSuccess"中进行手动判断
if (response.code !== 200) {
this.$message.error(response.msg || '上传失败');
}
注意：
1.项目对于异常/报错等返回消息的code是什么
2.是否属于上述情况在于，浏览器F12检查，这个方法是否http是200，自己手动检查其response中的响应码是否属于200