jsでFileReader APIを使用して複数のファイル入力を読み取る方法

Question

同じトピックで多くの回答がありましたが、ソリューションを探していましたが、私のコードで問題を把握できませんでした。

問題は、このAPIを使用して最初のファイル入力のみを読み取ることができることです。 最後の2つの入力が未定義の場合I console.log(e.target.files[1]);

私はvue 2を使用しています。ここにはコードがあります。私はここで

<input type="file" name="file[]" @change="img1"> 
<input type="file" name="file[]" @change="img2"> 
<input type="file" name="file[]" @change="img3"> 

     img1(e){ 
     console.log(e.target.files[0]); 
     this.readFile(e,'img1',0); 
     }, 
     img2(e){ 
     console.log(e.target.files[1]); 
     this.readFile(e,'img2',1); 

     }, 
     img3(e){ 
     console.log(e.target.files[2]); 
     this.readFile(e,'img3',2); 

     }, 

を持つ3つの入力の場合

私readFileの方法

readFile(e,img,i) { 
     let self=this; 
      if(window.FileReader) { 
      var file = e.target.files[i]; 
      var reader = new FileReader(); 
      if (file) { 
      let type=e.target.files[i].type; 
      console.log(type); 
      if(!this.cheackType(type)){ 
       this.showTypeWarn('Invalid Image Formate', 'Please Upload jpg or a png file only'); 
       return 
      } 
       reader.readAsDataURL(file); 
      } else { 
      // img.css('display', 'none'); 
      // img.attr('src', ''); 
      } 
      reader.onloadend = function (e) { 
       self.data.img=reader.result; 
      } 
      } 
     } 

ありがとうございました。

Answer 1

console.log(e.target.files[i]);を実行すると、イベントを発生させた要素のi番目のファイルにアクセスしています。各入力の最初のファイルにアクセスするには、console.log(e.target.files[0]);を試してください。