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

Question

我有一个应该处理上传文件的组件。它包含一个 bootstrap vue 进度组件。我会处理 filereader 的文件加载。这是 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

我解决了。 link 解决了我的问题： link

谢谢

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

Filereader progress in Vue.js component

filereader

vue-component

bootstrap-vue

vue-cli-3