我正在使用 vue 2 在我的网络应用程序中制作上传功能。目前它看起来像这样:
<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
那么我该如何让它工作呢?
多谢
在FileChange函数中使用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;
}
我在沙盒中创建了一个工作示例,您可以查看它。它将工作,选择一个文件或多个文件https://codesandbox.io/s/condescending-wildflower-jljxn?file=/src/App.vue
以下代码在一次选择 1 个文件时有效。使用 bootstrap 类显示输入字段和标签的 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: ["[[", "]]"],
});