Vue.js组件中的文件读取器进度

Question

我有一个组件应该处理上传文件。它包含一个bootstrap vue进度组件。我想处理文件阅读器的文件加载。这是vue.js组件的一部分：

<b-form-file accept=".jpg, .png, .gif, jpeg" v-model="file" size="sm" @change="fileUpload"></b-form-file>
<b-progress :value="progress" :max="maxvalue" show-progress animated></b-progress>

这是我的数据：

data () {
return {
...
file:null,
progress:0,
maxvalue:100
}
},

这是我的代码：

fileUpload(ev){
var files = ev.target.files || ev.dataTransfer.files;
const file=files[0];
var reader = new FileReader();
let _vue=this;
reader.onprogress=function(e){
let progress=Math.round((e.loaded / e.total) * 100);
if(progress<100){_vue.progress=progress;}
};
reader.onload = function(event) {
var dataURL = event.target.result;
let image=new Image();
if(file.size>3000000) {
_vue.form.file=null;
alert('Dimensioni file eccessive');
return;
}
image.onload=function(){
_vue.$refs.card.style.maxWidth='250px';
_vue.$refs.card.style.width=`${this.width}px`;
}
image.src=dataURL;
_vue.form.file=dataURL;
};
reader.readAsDataURL(file);
}

如果我设置了警报，我会得到进度值，否则不会。我注意到，如果我顺序设置两个警报，我会看到每个值的第一个警报，直到结束，然后另一个警报反过来。

对不起我的英语

Answer 1

我解决了。解决我问题的链接：链路

感谢