有时候,我们想要在Vue.js中观察文件输入以便捕捉文件选择改变事件。我们可以通过监听change事件来观察Vue.js中文件输入的文件选择变化事件。为了做到这一点,我们使用 @change 指令来编写:
<template>
<div id="app">
<input type="file" @change="previewFiles" multiple />
</div>
</template>
<script>
export default {
name: "App",
methods: {
previewFiles(event) {
console.log(event.target.files);
},
},
};
</script>
另外,我们将 @change 的值设置为 previewFiles 方法。然后当我们使用文件输入选择文件时,我们可以通过 event.target.files 属性获取所选文件的文件列表。我们还可以为文件输入分配一个引用,并在方法中使用它来引用文件输入。
为了做到这一点,我们可以这样写:
<template>
<div id="app">
<input type="file" ref="myFiles" @change="previewFiles" multiple />
</div>
</template><script>
export default {
name: "App",
methods: {
previewFiles() {
console.log(this.$refs.myFiles.files);
},
},
};
</script>
我们将 ref 属性设置为 myFiles ,然后使用 this.$refs.myFiles.files 获取选定的文件。我们可以通过监听change事件来观察Vue.js中文件输入的文件选择变化事件。另外,我们将 @change 的值设置为 previewFiles 方法。