位置: IT常识 - 正文

Vue中使用的el-upload时批量上传图片时报错问题处理(vue中el-dialog)

编辑:rootadmin
Vue中使用的el-upload时批量上传图片时报错问题处理 项目场景:

推荐整理分享Vue中使用的el-upload时批量上传图片时报错问题处理(vue中el-dialog),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue el-,vue中el的作用,vue中el-dialog,vue中el-col,vue el-,vue中el的作用,vue中el的作用,vue中el-dialog,内容如对您有帮助,希望把文章链接给更多的朋友!

项目场景:项目中有一个文件上传的场景,使用el-upload组件进行上传,单图上传是正常,但是在进行批量上传时报了错。

问题描述

使用el-upload在进行多图批量上传时系统提示报错。 报错提示:

Uncaught TypeError: Cannot set properties of null (setting 'status')     at VueComponent.handleProgress (element-ui.common.js:29656:1)     at Object.onProgress (element-ui.common.js:29373:1)     at XMLHttpRequestUpload.progress (element-ui.common.js:29039:1)

原因分析:Vue中使用的el-upload时批量上传图片时报错问题处理(vue中el-dialog)

在网上找了许多解决方案,有的说是因为el-upload组件file-list绑定的数组不可以手动修改,需要在on-success方法中使用另一个数组来存放文件,但实际操作下来还是有诸多问题,后来认真看了报错信息,思考是否跟文件上传时的状态有关。

在on-success方法中将fileList console.log出来

Success (res, file, fileList) {   console.log(fileList, 'fileList') }

发现当第一张上传完成时后面几张的status的值都为ready,是否在on-success中回传给file-list的值只取success状态下的呢?导致on-success只触发了一次,后面几张因为status问题而不往下执行了,于是决定使用every等所有图片状态都为success时再传值给file-list。

解决方案:

使用every等所有图片状态都为success时再传值给file-list

handleSuccess (res, file, fileList) { if (res.code == 200) { //参考如下代码即可 if (fileList.every(item => item.status == "success")) { //由于fileList是所有的文件包含之前已上传过的,这里需要做区分(带response的即为新上传的) fileList.map(item => { item.response && this.fileList.push({ name: item.name, fileId: item.response.data.name, url: item.response.data.url }); }) } this.$emit('input', this.fileList) } else { fileList.filter(o => o.uid != file.uid) this.$emit('input', this.fileList) this.$message({ message: res.msg, type: 'error', duration: 1500 }) } },

 最后效果如下:

本文链接地址:https://www.jiuchutong.com/zhishi/288828.html 转载请保留说明!

上一篇:灯光璀璨的曼哈顿下城,美国纽约 (© New York On Air/Offset/Shutterstock)(灯光璀璨的夜晚)

下一篇:【今日七夕】Love locker on a red stripe hanging in a temple in Chengdu, China © Philippe LEJEANVRE/Getty Images(今日七夕祝福语)

  • 苹果13pro查找我的iphone在哪里(iphone13查找我的iphone)

    苹果13pro查找我的iphone在哪里(iphone13查找我的iphone)

  • 西瓜视频会员入口在哪(西瓜视频怎么办会员)

    西瓜视频会员入口在哪(西瓜视频怎么办会员)

  • 东芝不做笔记本了吗

    东芝不做笔记本了吗

  • 微信自助解封身份验证失败怎么办(微信自助解封解)

    微信自助解封身份验证失败怎么办(微信自助解封解)

  • 京东过年期间送货吗(京东过年期间送什么)

    京东过年期间送货吗(京东过年期间送什么)

  • 拉黑微信对方显示什么(拉黑微信对方显示什么朋友圈)

    拉黑微信对方显示什么(拉黑微信对方显示什么朋友圈)

  • iphone7p有3dtouch功能吗(iphone7p有没有3dtouch)

    iphone7p有3dtouch功能吗(iphone7p有没有3dtouch)

  • 家里搜不到无线网名字(家里搜不到wi-fi)

    家里搜不到无线网名字(家里搜不到wi-fi)

  • i7-7700hq什么级别(i7 7700hq属于什么级别的cpu)

    i7-7700hq什么级别(i7 7700hq属于什么级别的cpu)

  • 电脑键盘有几个键按不出来怎么办(电脑键盘有几个键没反应是怎么回事)

    电脑键盘有几个键按不出来怎么办(电脑键盘有几个键没反应是怎么回事)

  • 淘宝双十一的红包退款了之后会退回来吗(淘宝双十一的红包退货会返还红包吗)

    淘宝双十一的红包退款了之后会退回来吗(淘宝双十一的红包退货会返还红包吗)

  • 苹果id邮箱可以更换吗(苹果id邮箱可以用163邮箱)

    苹果id邮箱可以更换吗(苹果id邮箱可以用163邮箱)

  • 苹果六位安全码是什么(苹果六位安全码怎么查)

    苹果六位安全码是什么(苹果六位安全码怎么查)

  • 高斯投影坐标系什么不变(高斯投影坐标系有3度带和6度带,它是)

    高斯投影坐标系什么不变(高斯投影坐标系有3度带和6度带,它是)

  • 荣耀20的红外遥控呢(荣耀20红外遥控在哪里设置)

    荣耀20的红外遥控呢(荣耀20红外遥控在哪里设置)

  • 快手注销了会显示什么(快手注销了会显示已注销吧)

    快手注销了会显示什么(快手注销了会显示已注销吧)

  • 蓝牙耳机什么手机都可以用吗(蓝牙耳机什么手机都可以匹配吗)

    蓝牙耳机什么手机都可以用吗(蓝牙耳机什么手机都可以匹配吗)

  • 怎么解决红米note5卡顿(怎么解决红米note9Pro手机发烫)

    怎么解决红米note5卡顿(怎么解决红米note9Pro手机发烫)

  • 手机跑分怎么测

    手机跑分怎么测

  • vivox9电池怎么更换(vivox9电池怎么换)

    vivox9电池怎么更换(vivox9电池怎么换)

  • oppor15多少瓦快充(oppor15最高支持多少w快充)

    oppor15多少瓦快充(oppor15最高支持多少w快充)

  • 12306网上订餐怎么订(如何在12306订餐)

    12306网上订餐怎么订(如何在12306订餐)

  • 迷你小米盒子无限重启(小米盒子mini无信号处理)

    迷你小米盒子无限重启(小米盒子mini无信号处理)

  • 闲鱼本次付款不支持信用卡(闲鱼买家付款了显示未付款)

    闲鱼本次付款不支持信用卡(闲鱼买家付款了显示未付款)

  • Linux系统复制vmware 虚拟机后网卡不能启动该怎么办?(Linux系统复制粘贴)

    Linux系统复制vmware 虚拟机后网卡不能启动该怎么办?(Linux系统复制粘贴)

  • 税盘维护费的账务处理
  • 以前年度所得税滞纳金的账务处理
  • 开发成本需要结转到存货吗
  • 个税申报的收入是应发工资还是实发工资
  • 企业所得税税率
  • 融资担保公司会计建议有哪些要求
  • 冲销成本结转需要什么凭证
  • 营改增之前材料含税吗
  • 支付刻制公司印章费
  • 公司商务卡可以日常消费
  • 地质勘察费用应由谁支付
  • 物业公司代收水电费会计分录
  • 记账凭证一定要签字吗
  • 购买的固定资产可以一次计入管理费用吗
  • 企业所得税减半征收计算公式
  • 建筑总包会计分录
  • 港口建设费2021年归国家税务总局
  • 进口有退税吗最新政策
  • 企业所得税每季度申报时间
  • 包装物报废收回残料
  • 工会经费返还账务处理,另记账么
  • 运输发票车种车号要求 自有车
  • 1697510110
  • 收到存款利息收入
  • 新公司没收入之前费用都走开办费吗
  • win11压缩文件
  • 取得进项税发票分录
  • 即征即退申报表如何填写
  • 商业一般纳税人税率多少
  • macos catalina新功能
  • 出租车车票可以出卖吗
  • php接收数据的方法
  • 领用增值税专用发票需要旧发票兑换吗
  • 门面出租赚钱吗
  • 今夕七夕
  • 收到保险公司退款
  • 只有收据没有发票怎么报销
  • 接受投资收到的现金计入
  • 什么叫点云数据
  • opencv项目开发实战
  • php递归算法经典题目
  • ajax获取php数据
  • 无纸化的好处和坏处
  • 金融企业往来支出属于费用吗
  • 车间领用材料应编制什么凭证
  • php安装不了
  • 无形资产资产处置损益和营业外收入
  • 三个数排序c语言程序从大到小
  • 如何对php网站页面进行修改
  • python操作yaml文件
  • 摄影属于哪种服务业
  • 什么叫做印花??
  • 货币市场基金的特点
  • 工程产值是怎么算的
  • 报账单大写金额负数填写方式
  • 取得税务师证书申请社保补贴
  • 电子钥匙报税
  • 车船税征收范围有
  • 投资性房地产公允价值模式账务处理
  • 免费给人一些客户资料违法吗
  • 金三财务报表如何更正?
  • 个体户要怎么注册公司
  • 小规模纳税人月销售额超过10万怎么交税
  • 银行受理汇票贴现业务
  • 应交税金借方余额在报表列示
  • 招标付款条件及比例
  • win7系统安装谷歌浏览器
  • 借助竹子赞美人物气节的诗句有哪些
  • Mac通过AppleID登录窗口
  • win xp 内存
  • 在linux系统中,用来存放系统所需要的配置文件
  • linux简单常用命令
  • cocos2dx性能优化与包体优化
  • jquery日期组件
  • nodejs cicd
  • 浅谈如何培养孩子的注意力
  • nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
  • python27文件夹
  • 新三步走和旧三步走的异同点
  • 扣缴个人所得税怎么计算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设