el-upload组件怎么获取on-error事件的状态码

最新推荐文章于 2024-01-21 20:30:48 发布
最新推荐文章于 2024-01-21 20:30:48 发布
阅读量4.3k 收藏 3
点赞数 1
分类专栏： element ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44839274/article/details/113702000
版权

JSON.parse 错误处理 on-error 事件 错误信息
关键词由CSDN通过智能技术生成

on-error的事件如下图：
图片描述

上传错误时的错误信息打印如下图：
图片描述

代码非常简单：JSON.parse(error.message)

阿娇
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-uolaod 上传组件on-error 回调 拿到后端消息体
weixin_44076775的博客
03-31 756
今天遇到测试提的bug报错，一个导入文件出错，后端有错误信息，前段为什么没有弹出，因为项目里所有报错都是架构里做的，所有请求都是用的axios，在请求拦截里做了错误消息提示。查找之后发现原因所在，用的el-uoload组件，他用action提交的，没有走请求拦截，所以要在uplaod的on-error回调里做一个错误信息提示，原因和解决思路都明确了，但是on-error这里拿到后端返回的消息却遇到了问题，这才是这篇博客要说的，费了一番功夫，圆满解决。 上图是打断点得到的on-error函数返回的err信息
通过vue的el-upload组件上传文件的例子
05-31
vue上传文件
el-upload上传文件失败问题
热门推荐
qq_一望损莓苔的博客
04-17 1万+
<el-upload ref="upload" :headers="getHeaders" :action="queryUrl" :on-preview="handlePreview" :on-change="upLoad" :on-success="handleExceed" :file-list="fileList" :auto-upload="fals...
el-upload上传组件，上传失败缩略图依旧存在问题
最新发布
qq_41935885的博客
01-21 556
上传时超过5M会报错提示不能超过该大小，但是缩略图依旧生成了
element upload 钩子函数的坑
琞、小菜
04-09 7727
因为需求需要我讲element 的upload组件放在了el-dialog中，但是坑就在这 看图片的上方是不是可以看到上传成功四个打字，但是它并不是真的在上传成功后显示出来的，只要页面加载成功，打开和关闭el-dialog都会出来这四个大字，来看代码 这是upload部分设置代码： （请忽略方法名称的不规范，这里只做个演示） on-success调用的方法 success () { thi...
＜el-upload＞组件的失败回调函数（on-error）里拿不到返回值err
MtangEr的博客
03-16 4186
预期上传失败后，弹出后台返回的消息，可是成功函数输出是一个对象能够成功操作，而失败函数取不到返回数据，转JSON对象也报错。 on-error函数里的打印输出的err： handleAvatarError(err,file,fileList){ console.log(err) } 如果想取到对应的code码，message值，却不能直接获取， 所以还要通过进一步处理 解决方法：把错误信息转成字符串，然后转掉Error:，剩下的内容就是个json，然后再转成对象，就可以取出来了。 handleProduc
Element 组件 el-upload 获取上传失败时的返回信息
weixin_45749030的博客
04-24 4410
在处理 el-upload 上传组件在上传失败时可以使用 on-error钩子函数来显示后端返回的错误信息 //html 区域 <el-upload class="upload-demo" ref="upload" :headers="headers" :action="excelUploadApi" :on-change="handleChange" :on-error="handleError" :show-file-list="false"> <el-button slot="t
element 框架 el-upload 上传文件问题
DLM1031653077的博客
11-03 559
在使用Vue+element 中的el-upload组件做文件上传时，最根本的原因是把路径写错 <el-upload :action="http://172.16.118.242:8241/personal/importExcel" :show-file-list="false" :auto-upload="true" :before-upload="beforeAvatarUpload" :on-success="successFun" :on-error="errorFun">
elements upload 的on-error回调函数取不到后端返回的msg信息
ministech的博客
01-29 660
文件上传失败时，调用element自带的on-error函数时，打印on-error函数自带的err参数。
关于使用Element Plus的upload组件上传文件报错问题
m0_65607651的博客
12-19 1118
关于使用Element Plus的upload组件上传文件报错问题
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
elemetUi 组件--el-upload 实现上传Excel文件的实例 elemetUi 组件的 el-upload 是一个功能强大且灵活的上传组件，通过它我们可以轻松地实现文件上传的功能。下面我们将详细介绍如何使用 elemetUi 组件的 el-...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
`el-upload`组件提供了一系列的属性和事件，让我们能够自定义上传过程。以下是一个简单的示例： ```html <el-form-item ref="uploadElement" prop="picUrl" class="upload-img-form" label-width="0"> <el-...
vue结合el-upload实现腾讯云视频上传功能
11-20
在本文中，我们将探讨如何利用Vue.js和Element UI的el-upload组件来实现腾讯云视频上传功能，以解决在上传大体积视频时遇到的性能和用户体验问题。首先，我们需要理解为什么选择腾讯云作为视频上传的解决方案。传统...
Element-UI upload上传文件失败 正确解析错误内容
IceStreamLab
01-13 8584
<el-upload class="upload" :action="uploadExcelAction" :headers="headers" list-type="picture" :show-file-list="false" :before-upload="beforeUpload" :on-success="uploadSuccess" :on-error="u...
Element UI库 之 el-upload 图片上传组件多次上传或重新上传失效bug
系咩的个人收藏博客
08-23 3057
/ 清空当前 files。在:on-change方法即本文 fileChange方法中最尾端加上下面这句。
el-upload调用接口上传失败依然回显问题解决
weixin_43965251的博客
08-09 4137
el-upload调用接口上传失败依然回显问题解决
element upload组件 onError神坑记录
ZeroChia的博客
04-08 1371
element upload组件的onError钩子函数返回错误是一个名为Error的对象 但要拿到后台的detail报错必须这么写 const detail = JSON.parse(err.message).detail 呵呵，文档都没写，这谁能猜得到。
el-upload组件封装
08-26
对于el-upload组件的封装，可以按照以下步骤进行： 1. 创建一个自定义组件，可以命名为Upload.vue 或者其他你喜欢的名字。 2. 在该组件中，引入el-upload组件，并根据需要设置相应的属性和事件。 3. 在组件的模板中，使用el-upload组件，并传入相应的props和event。 4. 在父组件中使用该封装的组件，并根据需要传递参数和处理事件。 以下是一个简单的el-upload组件封装的示例代码： ```vue <template> <div> <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleSuccess" :on-error="handleError" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </div> </template> <script> export default { data() { return { uploadUrl: 'your_upload_url' }; }, methods: { handleBeforeUpload(file) { // 处理上传前的逻辑，例如限制文件类型、大小等 }, handleSuccess(response, file, fileList) { // 处理上传成功后的逻辑 console.log('上传成功', response); }, handleError(error, file, fileList) { // 处理上传失败后的逻辑 console.log('上传失败', error); } } }; </script> <style> /* 可以根据需要进行样式调整 */ </style> ``` 在父组件中使用该自定义的Upload组件时，可以像普通的组件一样引入并使用： ```vue <template> <div> <Upload></Upload> </div> </template> <script> import Upload from '@/components/Upload.vue'; export default { components: { Upload } }; </script> ``` 这样你就可以在父组件中使用封装的el-upload组件了。你可以根据自己的需求，进一步调整和扩展该封装组件的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值