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

Question

我正在使用 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;
}

所以现在我想显示 event.target.files 对象上的文件名。

我试过这个：

 <p v-for="file in reaction.attachment">
  {{ file.name }}
</p>

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

 attachment:FileList

那么我该如何让它发挥作用呢？

非常感谢

原文由 Jamie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在 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;
}

原文由 Helping hand 发布，翻译遵循 CC BY-SA 4.0 许可协议