Question

我正在寻找一个解决方案，虽然我在代码中找不到相同主题的答案很多。

问题是，我只能使用此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;
            }
          }
        }

谢谢。

Answer 1

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

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

1 个答案: