Javascript vue处理2个文件输入

我创建了两个输入类型文件，如下所示：

<input
    type="file"
    id="file"
    class="inputfile"
    accept="image/x-png,image/gif,image/jpeg"
    @change="FileChange1"
    v-if="!tombolHidden"
    ref="myFiles1"
  />

及

---

我的问题：为什么当我用

onchange

方法

FileChange2（）

点击文件2中的上传按钮时。。执行方法

FileChange1（）

可能有什么问题？

虽然您似乎没有直接引用

id

，但这两个输入都有相同的

id

。将它们更改为

file1

和

file2

可能会在引擎盖下引用

id

。请向我们展示此代码的所有行（html、js）以便在中使用。或者给我们打电话来测试你的代码！

FileChange1(e) {
  console.log(e);

  var files = e.target.files || e.dataTransfer.files;
  // e.target.value = '';
  if (!files.length) return;
  this.createImage(files[0]);
  this.tombolHidden = true;
  this.placeHolder1 = true;
  this.hiddenEl = false;
},
createImage(file) {
  console.log(file);

  var image = new Image();
  var reader = new FileReader();
  var vm = this;

  reader.onload = e => {
    vm.gambar1 = e.target.result;
    console.log(vm.gambar1);
  };
  reader.readAsDataURL(file);
},

<input
    type="file"
    id="file"
    class="inputfile"
    accept="image/x-png,image/gif,image/jpeg"
    ref="myFiles2"
    @change="FileChange2"
    v-if="!tombolHidden2"
  />

FileChange2(e) {
  var files = e.target.files || e.dataTransfer.files;
  if (!files.length) return;
  this.createImage2(files[0]);
  this.tombolHidden2 = true;
  this.placeHolder2 = true;
  this.hiddenEl2 = false;
},
createImage2(file) {
  console.log(file);

  var image = new Image();
  var reader = new FileReader();
  var vm = this;

  reader.onload = e => {
    vm.gambar2 = e.target.result;
    console.log(vm.gambar2);
  };
  reader.readAsDataURL(file);
},