溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在做一個多圖片上傳的組件，需求是做到多文件依次上傳，并顯示上傳進度條。
邏輯部分實現了以后，在更新進度條視圖的時候出現一點問題：動態計算生產的進度 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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
