Vue Multi-File upload progress bar Progress does not update the problem

Transfer from hhttp://www.cnblogs.com/muge10/p/6767493.html

Thanks to this brother's article, because of this problem, I have repeatedly asked in Sgmentflow, no one can answer. Thank you for this article

Recently in the process of making a multi-image upload component, the need is to do multiple files upload sequentially, and display the upload progress bar.

After the logical section is implemented, a bit of a problem arises when updating the progress bar view: Dynamically calculating the progress of the production progress property is not automatically updated.

The original code is written in this way:

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];    The initial progress for each file is 0    item.progress = ' 0 ';    Arr.push (obj);} This.filearr = arr;

This adds a progress property to the file object directly to record the upload progress, initialize it to 0, and then upload the update progress in real time. But the strange thing is that this progress is not automatically updated in the view, feuds, has always been 0. Also the N method, the solution of baffled.

Later rage made a small demo to see where the problem really appeared, to remove the code that does not want to close, only the core code, and the simplest data to simulate. The code is as follows:

Simulating files with an array, simulating file objects with objects let files = [];for (Let i = 0, len = 5; i < Len; i++) {let    obj = {name: ' name_ ' + 1};< C2/>files.push (obj);} Let arr = [];for (Let i = 0, len = files.length; i < Len; i++) {    files[i].progress = ' 0 ';    Arr.push (Files[i]);}

This is simply to replace the files object with an array to simulate and replace the file object with a normal object simulation.

The magic is that it's automatically updated.

Because file files are later saved in the array, this means that the only difference is on the file Object! You then try to save the properties of the file object with a normal object.

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

The view is also automatically updated, which is really the difference between a file object and a normal object.

What is the difference between them? Take a look at their type first.

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]

Original files is the FileList type, file is the file type. The normal obj is the Object type.

Vue's data update is implemented using the Object.defineproperty Getter Setter function, and Vue does not set the Getter setter on the file object by default, so the file object is not updated automatically.

The solution is to use ordinary objects to save the information needed in the file object and then use it to construct the view data. Or you can manually set the setter of the File object, or it will be updated automatically. The code is as follows:

<div id= "App" > <input type= "text" id= ' a ' > <span id= ' B ' ></span> <input type= "file" Id= ' File ' > <button type= ' button ' id= ' button ' > Click to change the file property </button></div><script>//Normal object settings sett    er var obj = {}; Object.defineproperty (obj, ' hello ', {set:function (newval) {document.getElementById (' a '). Value = Newva            L        document.getElementById (' B '). InnerHTML = newval;    }    });    Document.addeventlistener (' KeyUp ', function (e) {Obj.hello = E.target.value;    });    File object Set 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 Multi-File upload progress bar progress does not update issues