【vue】文件批量上传报错问题解决Uncaught TypeError: Cannot set properties of undefined (setting ‘status‘)

一、问题描述

最近在vue项目上，使用el-upload组件实现多文件上传功能时出现了如下的报错内容。

Uncaught TypeError: Cannot set properties of undefined (setting ‘status’)

二、原因描述

经过反复断点、注释查找，最终发现问题在于：

vue项目的多文件上传为重复调用同一接口，而非单次调用，由于需要控制单次批量上传的文件个数，需要在全部文件成功上传后对上传文件列表进行清空。上传成功后fileList被清空会导致该问题产生，无论是使用this.$refs.upload.clearFiles()；或file-list="[]";，如果不在最后一个文件上传结束后再清空都会提示该错误
上传成功后向父组件传值this.$emit('transmission', file.response.data.uid)；

三、问题解决

1.第一次解决：

但是由于多文件上传做了限制（limit），即使分多次上传，只要fileList的长度大于limit的限制，即会被捕获，最后通过控制在最后一个文件时清空fileList得以解决。

// 在上传的最后一个文件处调用，否则报错
if (file == fileList[fileList.length - 1]) {// 清空上传文件列表，否则影响上传文件数限制判断this.$refs.upload.clearFiles();
}

2.第二次解决：

若多文件上传时中间存在大文件，则最后一个上传完成的文件应为该大文件，而不是原文件上传列表的最后一个文件，需要重新进行判断。

// 在全部文件完成上传后调用，清空上传列表
let isAllSuccess = true;
for (let item of fileList) {if (item.status != "success") {isAllSuccess = false;break;}
}
if (isAllSuccess) {// 清空上传文件列表，否则影响上传文件数限制判断this.$refs.upload.clearFiles();
}

【vue】文件批量上传报错问题解决Uncaught TypeError: Cannot set properties of undefined (setting ‘status‘)相关推荐

react 谷歌浏览器报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach‘)
运行react项目,报错: Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')at Object.i ...
报错，Uncaught TypeError: Cannot read properties of undefined (reading ‘inputValue‘) at ＜anonymous＞
错误: Uncaught TypeError: Cannot read properties of undefined (reading 'inputValue') at <anonym ...
js代码中for循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)
jsfor循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting 'className') 我想要 ...
蜻蜓短视频系统-文件上传之本地上传报错问题解决-蜻蜓Q蜻蜓s蜻蜓系统上传采用本地上传报错Class ‘League\Flysystem\Adapter\Local‘ not found
蜻蜓短视频系统-文件上传之本地上传报错问题解决-蜻蜓Q蜻蜓s蜻蜓系统上传采用本地上传报错蜻蜓系统有本地上传方式和云储存上传方式,云方式比较常用是不会有错的,本地上传方式可能会遇到这样的报错. 报错1 ...
接上一篇：【Vue 项目打包后访问报错：Uncaught TypeError: Cannot read property 'call' of undefined】
上一篇:Vue 项目打包后访问报错:Uncaught TypeError: Cannot read property 'call' of undefined 其实在修改 webpack.prod.co ...
el-upload 批量上传报错 Uncaught TypeError: Cannot set properties of null (setting ‘status‘)
因业务需求需实现图片或视频批量上传的功能结果发现一个坑 <template><el-uploadaction="https://up-cn-east-2.qiniup.c ...
Jmeter上传大文件无法上传报错的处理方法（Socket write error）
这时候,我们需要设置两个地方: 1)我们需要不勾选上传文件步骤中的KeepAlive 2)修改apache-jmeter-5.1.1\bin\jmeter.properties httpclient4 ...
ajax文件上传报400,js ajaxfileupload.js上传报错的解决方法
相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.cod ...
Springboot文件上传报错：failed to convert java.lang.String to org.springframework.util.unit.DataSize
springboot2.1.2版本文件上传报错,我上传的是一个18M的音频,默认的配置应该是超过10M的文件就会报错,所以我将配置修改为: spring:servlet:multipart:enabl ...