详解Vue 普通对象数据更新与 file 对象数据更新_网络技术

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

发布时间 - 2026-01-11 00:51:19 点击率：次

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

逻辑部分实现了以后，在更新进度条视图的时候出现一点问题：动态计算生产的进度 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>

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

# vue # 数据更新 # vue.js # 更新对象 # vue数据更新UI不刷新显示的解决办法 # 解决echarts vue数据更新 # 视图不更新问题(echarts嵌在vue弹框中) # 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结 # vue 解决异步数据更新问题 # Vue.js中provide/inject实现响应式数据更新的方法示例 # 详解vue中的父子传值双向绑定及数据更新问题 # 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题 # 解决vue keep-alive 数据更新的问题 # 谈谈对vue响应式数据更新的误解 # vue+echarts实现数据实时更新 # 的是 # 上传 # 自动更新 # 可以自动 # 换成了 # 都是 # 进度条 # 他们的 # 岿然不动 # 就在 # 是这样 # 出现在 # 百思不得其解 # 仅仅是 # 做一个 # 看一下 # 多图 # 最简单 # 来实现 # 解决办法

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何在Linux中生成随机密码 Linux openssl随

下一篇：抖音蓝v怎么变更企业号？变更企业号有什么好处？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何在Linux中生成随机密码 Linux openssl随

下一篇：抖音蓝v怎么变更企业号？变更企业号有什么好处？