欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解Vue 普通对象数据更新与 file 对象数据更新

程序员文章站 2022-11-15 10:08:02
最近在做一个多图片上传的组件,需求是做到多文件依次上传,并显示上传进度条。 逻辑部分实现了以后,在更新进度条视图的时候出现一点问题:动态计算生产的进度 progress...

最近在做一个多图片上传的组件,需求是做到多文件依次上传,并显示上传进度条。

逻辑部分实现了以后,在更新进度条视图的时候出现一点问题:动态计算生产的进度 progress 属性不会自动更新。

原来的代码是这样写的:

let files = this.filepicker.files;
if(!files.length) {
  return;
}

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, 用对象模拟 file 对象
let files = [];
for(let i = 0, len = 5; i < len; i++) {
  let obj = {name: 'name_' + 1};

  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 files = this.filepicker.files;
if(!files.length) {
  return;
}


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('files type', object.prototype.tostring.call(files));
// files type [object filelist]
console.log('arr  type', object.prototype.tostring.call(arr));
// arr  type [object array]

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,也可以自动更新。代码如下:

<div id="app">
  <input type="text" id='a'>
  <span id='b'></span>

  <input type="file" id='file'>
  <button type="button" id='button'>点击更改file属性</button>
</div>

<script>
  // 普通对象设置 setter
  var obj = {};
  object.defineproperty(obj, 'hello', {
    set: function(newval) {
      document.getelementbyid('a').value = newval;
      document.getelementbyid('b').innerhtml = newval;
    }
  });

  document.addeventlistener('keyup', function(e){
    obj.hello = e.target.value;
  });

  // file 对象设置 setter
  var fileinput = document.getelementbyid('file');
  var file;
  fileinput.addeventlistener('change', function(e){
    file = fileinput.files[0];

    object.defineproperty(file, 'progress', {
      set: function(newval) {
        // document.getelementbyid('a').value = newval;
        document.getelementbyid('b').innerhtml = newval;
      }
    });
  });

  document.getelementbyid('button').addeventlistener('click', function(){
    file.progress = 'hello file';
  });

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。