vue3读取本地文件

在Vue3中，读取本地文件通常涉及到浏览器的File API。你可以通过创建一个`<input type="file">`元素让用户选择文件，然后利用JavaScript处理文件上传和内容读取。以下是一个简单的示例：

<!-- HTML部分 -->
<input @change="handleFileChange" ref="fileInput" type="file">

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

const fileInput = ref(null); // 使用ref存储input元素

function handleFileChange(e) {
  const files = e.target.files; // 获取用户选择的文件列表
  if (files.length > 0) {
    const file = files[0]; // 取第一个文件
    const reader = new FileReader(); // 创建FileReader实例
    reader.readAsText(file, 'UTF-8'); // 读取文件内容为文本
    reader.onload = async (event) => {
      console.log('File content:', event.target.result);
      // 这里可以对文件内容进行进一步操作
    };
    reader.onerror = (error) => {
      console.error('Error reading file:', error);
    };
  }
}
</script>

在这个例子中，当用户选择文件后，`handleFileChange`函数会被触发，它会创建一个`FileReader`实例来读取文件内容，并在读取完成后打印出来。