Vue3 获取 input file 数据：使用 ref 轻松获取文件内容

"Vue3 获取 input file 数据：使用 ref 轻松获取文件内容"\n本文介绍在 Vue3 中使用 ref 获取 input file 的数据内容，并提供示例代码演示如何绑定 ref，监听文件选择事件，以及获取文件对象并进行操作。\n\nvue\n<template>\n <div>\n <input type="file" ref="fileInput" @change="handleFileChange">\n </div>\n</template>\n\n<script>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const fileInput = ref(null);\n\n const handleFileChange = () => {\n const file = fileInput.value.files[0];\n console.log(file);\n // 可以在这里对文件进行操作，比如上传到服务器等\n };\n\n return {\n fileInput,\n handleFileChange\n };\n }\n};\n</script>\n\n\n在上述代码中，我们首先使用 ref 创建了一个名为 fileInput 的引用。然后，我们在模板中使用 ref 绑定到了 <input> 元素上。当用户选择文件时，@change 事件会触发 handleFileChange 方法，我们可以通过 fileInput.value.files[0] 获取到选择的文件对象，并对其进行操作。\n\n请注意，fileInput.value 是一个 DOM 元素，所以我们可以通过 files 属性来获取选择的文件。