el-upload组件,上传文件失败,:on-error方法失效

el-upload组件方法失效

  • 问题
  • 原因
  • 解决

问题

使用el-upload组件上传文件,有这么一个问题上传文件处理报错Excel、Word。org.apache.poi.openxml4j.exceptions.OLE2NotOfficeXmlFileException。

按上述,后端编写完代码,输出正常,但是预期在后端抛出错时前端能够有提示。

就希望能够在前端发起“提交/确定”的方法里面有一个catch怎么的,可以在方法抛出异常/报错时能够给到一个地方写代码,但是项目使用的el-upload默认提交,没有一个类似.catch(() => {})暴露出来可以处理的方法。

好在el-upload官方有一些方法如下:
在这里插入图片描述
但是我在:on-error="handleUploadError"方法中写了处理还是没有生效(后端抛异常,前端给提示)。
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/651bb8fd11b744ca80296be4d09cfec8.png在这里插入图片描述

原因

项目后端对响应封装处理,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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/pingmian/84359.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

可视化图解算法50:最小的K个数

牛客网 面试笔试 TOP101 | LeetCode 面试题 17.14. 最小K个数 1. 题目 描述 给定一个长度为 n 的可能有重复值的数组,找出其中不去重的最小的 k 个数。例如数组元素是4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4(任意顺序皆可)。 数…

Ragflow配置注意项

在 .env文件中启用v.0.19.0版本,带emabedding models RAGFLOW_IMAGEinfiniflow/ragflow:v0.19.0 RAGFlow image tagImage size (GB)Has embedding models?Stable?v0.19.0≈9✔️Stable releasev0.19.0-slim≈2❌Stable releasenightly≈9✔️Unstable nightly b…

Word VBA快速制作填空题

实例需求:Word文档用于英语单词学习,重点记忆单词标记下划线,其内容如下图所示。 现在文档转换为填空题(无论单词字符多少,填空部分统一使用10个空格)和参考答案两部分,如下图所示。 示例代码如…

不变性(Immutability)模式

1. 不变性(Immutability)模式 1.1. 不变性模式的概念 定义:对象一旦被创建,其内部状态就不再发生变化,也即“只读无写”,不会出现并发写的问题,自然线程安全。 适用场景:只读共享…

探秘鸿蒙 HarmonyOS NEXT:鸿蒙定时器,简单倒计时的场景应用

在鸿蒙 ArkTS 开发中,定时器是实现动态效果和定时任务的重要工具。基于鸿蒙 API 12 及以上版本,ArkTS 提供了功能丰富的定时器 API,本文将带你全面了解定时器的使用方法。 一、定时器常用 API 介绍 ArkTS 中的定时器主要分为一次性定时器&a…

安卓基础(语义树)

进化1 package com.example.demotest.unread;import android.accessibilityservice.AccessibilityService; import android.content.res.Resources; import android.graphics.Rect; import android.util.DisplayMetrics; import android.util.Log; import android.view.access…

Linux基础开发工具——vim工具

文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…

AcWing--数据结构1

用数组来模拟链表。这种实现链表的方式也叫静态链表。 1.单链表 写邻接表&#xff1a;存储图和树 我们定义&#xff1a;e[N]用来表示某个点的值是多少&#xff1b;ne[N]用来表示某个点的next指针是多少 e和ne是用下标关联起来的 如&#xff1a;head->3->5->7->…

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…

多模态分类案例实现

以下是基于飞桨平台实现的多模态分类详细案例&#xff0c;结合图像和文本信息进行分类任务。案例包含数据处理、模型构建、训练和评估的完整流程&#xff0c;并提供详细注释&#xff1a; 一、多模态分类案例实现 import os import json import numpy as np from PIL import I…

Express框架:Node.js的轻量级Web应用利器

Hi,我是布兰妮甜 !在当今快速发展的Web开发领域,Node.js已成为构建高性能、可扩展网络应用的重要基石。而在这片肥沃的生态系统中,Express框架犹如一座经久不衰的灯塔,指引着无数开发者高效构建Web应用的方向。本文章在为读者提供一份全面而深入的Express框架指南。无论您…

K-Means颜色变卦和渐变色

一、理论深度提升&#xff1a;补充算法细节与数学基础 1. K-Means 算法核心公式&#xff08;增强专业性&#xff09; 在 “原理步骤” 中加入数学表达式&#xff0c;说明聚类目标&#xff1a; K-Means 的目标是最小化簇内平方和&#xff08;Within-Cluster Sum of Squares, W…

深入解析C#表达式求值:优先级、结合性与括号的魔法

—— 为什么2/6*4不等于1/12&#xff1f; &#x1f50d; 一、表达式求值顺序为何重要&#xff1f; 表达式如精密仪器&#xff0c;子表达式求值顺序直接决定结果。例如&#xff1a; int result 3 * 5 2;若先算乘法&#xff1a;(3*5)2 17 ✅若先算加法&#xff1a;3*(52)21…

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…

Spring——Spring相关类原理与实战

摘要 本文深入探讨了 Spring 框架中 InitializingBean 接口的原理与实战应用&#xff0c;该接口是 Spring 提供的一个生命周期接口&#xff0c;用于在 Bean 属性注入完成后执行初始化逻辑。文章详细介绍了接口定义、作用、典型使用场景&#xff0c;并与其他相关概念如 PostCon…

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…

冯诺依曼架构是什么?

冯诺依曼架构是什么&#xff1f; 冯诺依曼架构&#xff08;Von Neumann Architecture&#xff09;是现代计算机的基础设计框架&#xff0c;由数学家约翰冯诺依曼&#xff08;John von Neumann&#xff09;及其团队在1945年提出。其核心思想是通过统一存储程序与数据&#xff0…

【持续更新】linux网络编程试题

问题1 请简要说明TCP/IP协议栈的四层结构&#xff0c;并分别举出每一层出现的典型协议或应用。 答案 应用层&#xff1a;ping,telnet,dns 传输层&#xff1a;tcp,udp 网络层&#xff1a;ip,icmp 数据链路层&#xff1a;arp,rarp 问题2 下列协议或应用分别属于TCP/IP协议…