el-upload实现只上传一个文件且再次上传不会覆盖前面的文件的问题
1.el-upload实现只上传一个文件且再次上传不会覆盖前面的文件的问题2.Cannot set properties of undefined (setting 'status')
·
这部分的逻辑是只需要上传一张图片,所以我在代码里面设置了最大上传数量:limit = 1
<el-upload
ref="upload"
class="upload-demo"
:action="baseUrl + '/upload/doAction'"
:data="pramsData"
:on-success="uploadSucess"
:multiple="false"
:limit="1"
:on-change="handleChange"
:headers="uploadHeader"
:file-list="fileList"
list-type="picture"
>
但是这样设置之后会有一个bug,再次上传不能覆盖上次的,需要手动清除才可以上传,因为上传的数量设置成了一张,所以当上传第二张的时候里面的方法那些根本不会再次执行了
所以我的解决方式就是把最大上传数量设置成两张,通过去修改fileList里面的数组去保留最后一张
<el-upload
ref="upload"
class="upload-demo"
:action="baseUrl + '/upload/doAction'"
:data="pramsData"
:on-success="uploadSucess"
:multiple="false"
:limit="2"
:on-change="handleChange"
:headers="uploadHeader"
:file-list="fileList"
list-type="picture"
>
开始的话我是直接用第二张覆盖第一张,结果会报一个错误
handleChange(file, fileList) {
//先把原数组清空,在把最后一张赋值给新数组,但是主要会改变原数组,不可取
this.fileList = [];
this.fileList = fileList[1]
},
Cannot set properties of undefined (setting 'status')
原因是因为:fileList不能改变这个原数组,所以这里我们使用slice方法进行切割,slice方法不会改变原数组,这样就可以解决这个报错了,并且可以保持只能上传一张图片,再次上传能进行更新。
//方法1
handleChange(file, fileList) {
// slice(-1)保留最后一个文件,不会改变原数组
this.fileList = fileList.slice(-1);
},
//方法二
handleChange(file, fileList) {
// 不会改变fileList
const newFileList = fileList.slice(-1);
// fileList直接赋值this.fileList不会改变的原因是因为他们两个的指向是一致的
this.fileList = newFileList;
},
更多推荐
已为社区贡献4条内容
所有评论(0)