<el-upload>组件的失败回调函数(on-error)里拿不到返回值err

在使用el-upload组件时,遇到on-error回调无法直接获取后台返回的错误信息。通过将错误信息转换为字符串,移除Error:前缀,再解析为JSON对象,可以成功提取到code和message等信息。
摘要由CSDN通过智能技术生成

<el-upload>组件的失败回调函数(on-error)里拿不到返回值err
预期上传失败后,弹出后台返回的消息,可是成功函数输出是一个对象能够成功操作,而失败函数取不到返回数据,转JSON对象也报错。
on-error函数里的打印输出的err:
handleAvatarError(err,file,fileList){
console.log(err)
}
在这里插入图片描述
如果想取到对应的code码,message值,却不能直接获取,
所以还要通过进一步处理

解决方法:把错误信息转成字符串,然后去掉" Error: " ,剩下的内容就是个json,然后再转成对象,就可以取出来了。
handleProductError(err) { console.log(err) let myError=err.toString();//转字符串 myError=myError.replace("Error: ","") // 去掉前面的" Error: " myError=JSON.parse(myError);//转对象 console.log(myError); },

使用Element UI的el-table组件可以更方便地呈现用户信息表格,你可以按照以下步骤将用户信息渲染到表格中: 1. 在Vue组件中引入Element UI库和axios等工具 ```javascript import axios from 'axios' import { ElTable, ElTableColumn } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' ``` 2. 在Vue组件中注册ElTable和ElTableColumn组件 ```javascript export default { components: { ElTable, ElTableColumn }, data() { return { userList: [] } }, mounted() { axios.get('/api/users') .then(res => { this.userList = res.data }) .catch(err => { console.log(err) }) } } ``` 3. 在Vue组件的模板中添加el-table组件,并设置表格的列和数据 ```html <template> <div> <el-table :data="userList" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> </el-table> </div> </template> ``` 在上面的代码中,我们使用了el-table和el-table-column组件,其中el-table组件的:data属性绑定了userList,即我们从后端获到的用户信息数组。而每个el-table-column组件则表示一个表格列,通过prop属性指定了要渲染的数据字段,通过label属性指定了列的表头名称。 这样,当组件渲染时,Vue会自动将用户信息数组渲染到表格中,并根据el-table-column组件的设置渲染表头和列数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值