如何使用FileReader API读取多个文件输入js

我一直在寻找一个解决方案，虽然有很多相同的主题的答案我无法找出我的代码中的问题。如何使用FileReader API读取多个文件输入js

问题是，我只能读取使用此API的第一个文件输入。最后两个输入显示未定义的，如果我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); 

     },

这里是我的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; 
      } 
      } 
     }

谢谢。

来源

2017-07-25 sadek

你需要一个dom ref，例如：'e.target.nextElementSibling.files [0]'。使用'id'将是最简单的 – dandavis

当你做console.log(e.target.files[i]);你正在访问触发事件的元素的第i个文件。您应该尝试使用console.log(e.target.files[0]);来访问每个输入的第一个文件。

来源

2017-07-25 22:31:34

非常感谢！我根本没有想到这一点。：）再次感谢！ – sadek

如何使用FileReader API读取多个文件输入js

回答

相关问题