最近在做一个多图片上传的组件,需求是做到多文件依次上传,并显示上传进度条。
逻辑部分实现了以后,在更新进度条视图的时候出现一点问题:动态计算生产的进度 progress 属性不会自动更新。
原来的代码是这样写的:
let arr = [];
for(let i = 0,len = files.length; i < len; i++) {
let item = files[i];
// 每个文件初始进度为0
item.progress = '0';
arr.push(obj);
}
this.fileArr = arr;
这里直接将 file 对象添加一个 progress 属性记录上传进度,并初始化为0,然后上传时候实时计算更新 progress。但奇怪的是这个 progress 在视图里并不会自动更新,岿然不动,一直都是0。还了N中办法,百思不得其解。
后来一怒之下做了一个小 demo,看看问题到底出现在哪里,把不想关的代码都剔除,只保留核心代码,并用最简单的数据来模拟一下。代码如下:
files.push(obj);
}
let arr = [];
for(let i = 0,len = files.length; i < len; i++) {
files[i].progress = '0';
arr.push(files[i]);
}
这里仅仅是把 files 对象换成了数组来模拟,把 file 对象换成了普通对象模拟。
神奇的是,这样居然就自动更新了。
由于文件 file 后来都保存在数组里,这说明唯一的区别就在 file 对象上面!于是打算用普通对象保存 file 对象的属性再试试。
let arr = [];
for(let i = 0,len = files.length; i < len; i++) {
let item = files[i];
let obj = {};
obj.name = item.name;
obj.size = item.size;
obj.progress = '0';
arr.push(obj);
}
这样视图也是可以自动更新的,果然是 file 对象和普通对象的区别。
它们究竟是什么区别呢?看一下他们的类型先。
console.log('item type',Object.prototype.toString.call (files[0]));
// item type [object File]
console.log('obj type',Object.prototype.toString.call (obj));
// obj type [object Object]
原来 files 是 FileList 类型,file 是 File 类型。而普通的 obj 是 Object 类型。
Vue 的数据更新利用的是 Object.defineProperty 的 getter setter 函数来实现的,而 Vue 默认没有对 File 对象设置 getter setter,因此用 File 对象不会自动更新。
解决办法,就是用普通对象保存 file 对象里需要的信息,然后用来构造视图数据。或者自己手动设置 File 对象的 setter,也可以自动更新。代码如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。