node.js - HTML FormData 文件未发布到 REST API

Question

我正在尝试将文件从前端 index.html 发布到在后台运行的 Express 服务器。然后应该 API 将文件保存到 Firebase 存储中。服务器运行正常，正在接收 POST，但 req.body 中没有数据。

index.html - 前端

<form method="POST" id="form">
 <input type="file" id="file" name="file" multiple>
 <input type="submit">
</form>

<script>
 const form = document.querySelector('#form')

 const postFile = (e) => {
  e.preventDefault()
  const header = { "Content-Type": "multipart/form-data" }

  let formData = new FormData()
  formData.append('file', this.file.files[0])

  fetch('http://localhost:3003/file', {
   method: form.method,
   headers: header,
   body: formData
  }).then(() => {
      alert("OK")
  }).catch(() => {
      alert("Nope")
  })
 }

 form.addEventListener('submit', (e) => postFile(e))
</script>

server.js - 后端（不完整）

const server = express()
const routes = require('./routes')

server.use(cors())
server.use(express.urlencoded({
    limit: '50mb',
    extended: true
}))
server.use(express.json({
    limit: '50mb',
    extended: true
}))
server.use(routes)
server.listen(3003)

fileController.js - 后端（不完整）

exports.addFile = async (req, res) => {
    try {
        console.log(req.body)

        return res.status(200).send({
            message: "Ok"
        })
    } catch (e) {
        return res.status(500).send({
            message: e.message
        })
    }

当我在获取之前 console.log(this.file.files[0]) 时，它实际上返回了文件，但在服务器中只是一个空数组。 前端控制台.log ; 服务器控制台.log

标签： node.jsexpresspostfetchmultipartform-data

Answer 1

好的，问题解决了。正如 Wezelkrozum 指出的那样，我本可以使用 multer ( npm install --save multer)

应用的更改：

索引.html

<form method="POST" id="form" **enctype="multipart/form-data"**>
 <input type="file" id="file" name="file" multiple>
 <input type="submit">
</form>

<script>
 const form = document.querySelector('#form')

 const postFile = (e) => {
  e.preventDefault()

  let formData = new FormData()
  formData.append('file', this.file.files[0])

  fetch('http://localhost:3003/file', { //Removed the Headers
   method: form.method,
   body: formData
  }).then(() => {
      alert("OK")
  }).catch(() => {
      alert("Nope")
  })
 }

 form.addEventListener('submit', (e) => postFile(e))
</script>

路由.js

const express = require('express')
const multer = require('multer')
const routes = express.Router()

const upload = multer({dest: 'uploads/'}) //Folder where the temp file is stored

routes.post('/file', upload.single('file'), fileController.addFile) //This is for one file only
module.exports = routes

然后在 Controller 中，文件属性将以 req.file 的形式出现，就像：

let file = req.file

编辑：

要获取实际的文件内容，您必须使用：

npm install fs

fs.readFileSync(file.path)

它将返回文件的缓冲区，用于与File或相关的任何操作Blob