Vue3 获取 input file数据

在 Vue3 中，可以通过使用 ref 来获取 input file 的数据。以下是一个示例：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange">
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fileInput = ref(null);

    const handleFileChange = () => {
      const file = fileInput.value.files[0];
      console.log(file);
      // 可以在这里对文件进行操作，比如上传到服务器等
    };

    return {
      fileInput,
      handleFileChange
    };
  }
};
</script>

在上述代码中，我们首先使用 ref 创建了一个名为 fileInput 的引用。然后，我们在模板中使用 ref 绑定到了 <input> 元素上。当用户选择文件时，@change 事件会触发 handleFileChange 方法，我们可以通过 fileInput.value.files[0] 获取到选择的文件对象，并对其进行操作。

请注意，fileInput.value 是一个 DOM 元素，所以我们可以通过 files 属性来获取选择的文件