如何将服务器文件系统中的二进制文件加载到Vite/Vue3中？

fs是Node.js专属的文件系统模块，只能在Node.js运行环境（如后端服务）中使用，Vue前端代码运行在浏览器里，浏览器不提供这个API，所以会出现Uncaught TypeError: fs.readFile is not a function错误。

下面是两种正确的实现方式：

方式一：读取前端静态资源中的二进制文件 #

如果你的文件放在Vue项目的public目录下（静态资源目录，打包后会直接复制到dist根目录），可以直接通过HTTP请求获取：

<script setup>
import { ref, onMounted } from 'vue'

const fileContent = ref(null)

onMounted(async () => {
  try {
    // 发送请求获取二进制文件，指定responseType为blob
    const response = await fetch('/filename')
    if (!response.ok) throw new Error('文件请求失败')
    const blob = await response.blob()
    
    // 根据需求处理二进制数据，这里示例转为ArrayBuffer
    const reader = new FileReader()
    reader.onload = (e) => {
      fileContent.value = e.target.result
      console.log('二进制数据加载完成:', fileContent.value)
    }
    reader.readAsArrayBuffer(blob)
    
    // 若需要转为Base64格式，改用以下代码：
    // reader.readAsDataURL(blob)
  } catch (err) {
    console.error('加载文件出错:', err)
  }
})
</script>

<template>
  <div v-if="fileContent">文件已成功加载</div>
  <div v-else>加载中...</div>
</template>

方式二：通过后端接口读取服务器上的文件 #

如果文件存储在服务器的非静态资源目录，需要后端提供接口读取文件并返回：

后端示例（Node.js + Express） #

const express = require('express')
const fs = require('fs')
const path = require('path')
const app = express()

// 跨域处理（如果前端和后端端口不同）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'GET')
  next()
})

app.get('/api/get-binary-file', (req, res) => {
  const filePath = path.join(__dirname, 'path/to/your/filename')
  // 以二进制流形式返回文件
  res.sendFile(filePath, {
    headers: {
      'Content-Type': 'application/octet-stream'
    }
  }, (err) => {
    if (err) {
      res.status(500).send('文件读取失败')
    }
  })
})

app.listen(3000, () => console.log('后端服务运行在http://localhost:3000'))

前端调用接口代码 #

<script setup>
import { ref, onMounted } from 'vue'

const fileContent = ref(null)

onMounted(async () => {
  try {
    const response = await fetch('http://localhost:3000/api/get-binary-file')
    if (!response.ok) throw new Error('接口请求失败')
    const blob = await response.blob()
    
    // 处理二进制数据，示例转为ArrayBuffer
    const reader = new FileReader()
    reader.onload = (e) => {
      fileContent.value = e.target.result
      console.log('从后端获取的二进制数据:', fileContent.value)
    }
    reader.readAsArrayBuffer(blob)
  } catch (err) {
    console.error('加载文件出错:', err)
  }
})
</script>

<template>
  <div v-if="fileContent">文件已成功加载</div>
  <div v-else>加载中...</div>
</template>

内容的提问来源于stack exchange，提问作者three.vue.noob