Javascript Vue.js显示文件名event.target.files

我正在使用vue 2在我的webapp中创建上载功能。现在看起来是这样的：

<label class="btn btn-xs btn-primary">
    <input type="file" name="attachment[]" @change="onFileChange" multiple/>
    Upload file
</label>

input[type="file"]  {
  display: none;
}


onFileChange() {
    this.reaction.attachment = event.target.files || event.dataTransfer.files;
}

attachment:FileList

但那不行！？当我查看vue devtools时，附件对象如下所示：

<label class="btn btn-xs btn-primary">
    <input type="file" name="attachment[]" @change="onFileChange" multiple/>
    Upload file
</label>

input[type="file"]  {
  display: none;
}


onFileChange() {
    this.reaction.attachment = event.target.files || event.dataTransfer.files;
}

attachment:FileList

那我怎么才能让它工作呢

---

非常感谢

您需要使用onFileChange函数内的document.getElementById（“fileId”）.files[0].name来获取文件名

<label class="btn btn-xs btn-primary">
    <input type="file" name="attachment[]" id="fileId" @change="onFileChange" multiple/>
    Upload file
</label>
{{fileName}}


input[type="file"]  {
  height:0;
  weight:0;
  //OR
  display:none
}

onFileChange(event){
   var fileData =  event.target.files[0];
   this.fileName=fileData.name;
}

---

以下代码在一次选择一个文件时起作用。 使用引导类显示输入字段和标签的HTML代码：

<input type="file" class="custom-file-input" id="idEditUploadVideo"
       v-on:change="videoChoosen">
<label class="custom-file-label" id="idFileName" for="idEditUploadVideo">
    [[videoFileName]]</label>

---

你的Vue代码是什么？