Прогресс чтения файлов в компоненте Vue. js - PullRequest
Новая
       4

Прогресс чтения файлов в компоненте Vue. js

0 голосов
/ 31 марта 2020

У меня есть компонент, который должен обрабатывать загружаемый файл. Он содержит 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);
}

Если я установлю предупреждение, я получу значения прогресса, иначе нет. Я заметил, что если я установил два предупреждения последовательно, я вижу первое предупреждение для каждого значения до конца, а затем другое в обратном порядке.

Извините за мой английский sh

1 Ответ

0 голосов
/ 02 апреля 2020

Я решил. Ссылка, которая разрешила мою проблему: ссылка

Спасибо

...