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

那么我該如何讓它發揮作用呢？

非常感謝

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;
}

Answer 2

以下代碼在一次選擇 1 個文件時有效。 使用引導類顯示輸入字段和標簽的 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>

JS 代碼在用戶選擇文件后立即在標簽中顯示文件名：

var vueVar = new Vue({
    el: '#idSomething',
    data: {
        videoFileName:''
    },
    methods: {
        videoChoosen(event){
            this.videoFileName = event.target.files[0].name;
        }
    },
    delimiters: ["[[", "]]"],
});

Answer 3

我在沙箱中創建了一個工作示例，您可以查看它。 它可以選擇一個文件或多個文件https://codesandbox.io/s/condescending-wildflower-jljxn?file=/src/App.vue