如何将HTML端上传的文件变量传递到Node.js中读取使用

1. 前端index.html调整 #

你原有代码缺少表单提交/异步上传的逻辑，无法将本地文件传递到后端，以下提供两种实现方案：

方案A：原生表单提交（页面会刷新） #

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" id="myFile" name="filename">
  <input type="submit" value="上传文件">
</form>

方案B：异步上传（页面无刷新） #

<input type="file" id="myFile" name="filename">
<button id="uploadBtn">上传文件</button>
<script>
document.getElementById('uploadBtn').addEventListener('click', async () => {
  const fileInput = document.getElementById('myFile')
  if (!fileInput.files[0]) {
    alert('请先选择需要上传的文件')
    return
  }
  const formData = new FormData()
  formData.append('filename', fileInput.files[0])
  await fetch('/upload', {
    method: 'POST',
    body: formData
  })
})
</script>

2. 后端app.js调整 #

你原有代码仅引入了fs模块，缺少HTTP服务能力和文件上传解析逻辑，需要配合express（轻量服务框架）和multer（文件上传解析中间件）实现，完整代码如下：

const express = require('express')
const multer = require('multer')
const fs = require('fs')
const app = express()
const PORT = 3000

// 配置multer将上传的文件暂存到内存，无需落地磁盘即可读取内容
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

// 配置静态资源服务，可直接访问放在public目录下的index.html
app.use(express.static('public'))

// 处理文件上传请求的接口
app.post('/upload', upload.single('filename'), (req, res) => {
  // 直接从内存中读取文件内容，转utf8编码
  const fileContent = req.file.buffer.toString('utf8')
  console.log('上传的文件内容：\n', fileContent)

  // 如果你需要先把文件保存到服务端磁盘再读取，替换为以下代码即可
  // const savePath = `./${req.file.originalname}`
  // fs.writeFileSync(savePath, req.file.buffer)
  // const readMe = fs.readFileSync(savePath, 'utf8')
  // console.log(readMe)

  res.send('文件读取完成')
})

app.listen(PORT, () => {
  console.log(`服务已启动，访问地址：http://localhost:${PORT}`)
})

3. 启动运行步骤 #

• 项目根目录下新建public文件夹，把修改完成的index.html放入该文件夹
• 根目录执行npm init -y初始化Node.js项目
• 执行npm install express multer安装所需依赖
• 执行node app.js启动服务，浏览器打开http://localhost:3000即可测试上传功能

内容的提问来源于stack exchange，提问作者user16974637