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

Vue中普通对象与File对象数据的更新

在构建一个多图片上传组件的过程中，遇到了一个关于数据更新的问题。需求是实现多文件依次上传，并实时显示上传进度条。但在视图更新进度条时，遇到了动态数据无法自动更新的问题。

原先的代码是这样的：从文件选择器获取文件列表，为每个文件对象添加一个progress属性以记录上传进度，并将其初始化为0。但在视图里，这个progress属性并不会自动更新，一直保持为0。

代码如下：

```javascript

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];

item.progress = '0';

arr.push(item);

}

this.fileArr = arr;

```

为了找出问题的根源，我创建了一个简单的demo，用数组模拟FileList，用普通对象模拟File对象。惊奇地发现，这样做时视图居然能自动更新。

于是，我开始对比FileList、File对象和普通的Object对象在Vue中的表现。在Vue中，数据的更新是通过Object.defineProperty的getter和setter函数来实现的。而File对象并没有默认的getter和setter函数，因此Vue无法对其自动更新。

为了解决这个问题，我将文件的属性复制到一个普通对象里，然后再进行操作。这样视图就能自动更新了。代码如下：

```javascript

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);

}

```

最终，我通过对比对象的类型发现，files是FileList类型，file是File类型，而普通的对象是Object类型。Vue默认对Object类型的数据进行了特殊处理，使其具有响应性，而对File类型的数据则没有。当操作File对象时，需要特别处理以确保视图能自动更新。在编程世界中，我们经常需要处理文件上传和视图数据的展示问题。本文将向您展示一种解决策略，即通过普通对象保存文件对象中的关键信息，以便构建视图数据。我们还可以手动设置File对象的setter，实现自动更新功能。让我们深入这一过程。

在前端开发中，我们经常会遇到需要用户上传文件的场景。以下是一个简单的HTML结构示例，包含一个文本输入框、一个文件上传框以及一个按钮：

接下来，我们通过JavaScript实现相关功能。我们可以通过定义一个普通对象并为它设置setter来更新视图数据。例如，当用户在文本输入框中输入内容时，我们可以将内容保存到obj对象的hello属性中，并通过setter更新界面显示：

<script>

var obj = {};

Object.defineProperty(obj, 'hello', {

set: function(newVal) {

document.getElementById('a').value = newVal; // 更新文本输入框的值

document.getElementById('b').textContent = newVal; // 更新span标签的内容

}

});

// ...其他代码...

</script>

然后，对于文件上传部分，我们可以在文件选择框的change事件监听器中获取选中的文件，并为该文件设置一个自定义属性progress的setter。当点击按钮时，我们可以通过设置该属性的值来更新界面显示：

<script>

var fileInput = document.getElementById('file'); // 获取文件选择框元素

var file; // 用于存储选中的文件对象

// ...其他代码...

fileInput.addEventListener('change', function(e){ // 当文件选择框的值发生变化时触发此事件

file = e.target.files[0]; // 获取选中的文件对象

// 为文件对象设置progress属性的setter，更新span标签的内容展示进度信息

Object.defineProperty(file, 'progress', {

set: function(newVal) {

document.getElementById('b').textContent = newVal; // 更新span标签的内容展示进度信息

}

});

});

// ...其他代码...

</script>

以上就是如何通过普通对象和自定义setter来实现文件上传和视图数据更新的方法。这种方法能够帮助我们更灵活地处理文件上传问题，并且可以通过简单的代码实现视图数据的更新。希望这个例子对大家有所帮助，也请大家多多支持我们的博客或网站。最后别忘了关注我们的社交媒体账号，获取更多前沿的技术资讯和教程。如有任何疑问或建议，欢迎留言交流。狼蚁SEO团队期待与您共同进步！