HTML FormData 文件未发布到 REST API答案

【问题标题】：HTML FormData File is not posted to REST APIHTML FormData 文件未发布到 REST API
【发布时间】：2020-05-30 14:23:43
【问题描述】：

我正在尝试将文件从前端 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]) 实际上返回文件时，它应该是，但在服务器中只是一个空数组。 Front-end console.log; Server console.log

【问题讨论】：

您在服务器端使用哪些 express 和 cors npm 包（和版本号）？
我想这就是你要找的答案：stackoverflow.com/questions/49067423/…
另一个提示。当您添加 multer 并将 upload.single('file') 添加到服务器中的 post 处理程序时，您应该删除 content-type 标头，因为浏览器会自动添加该标头。并且手动将 Content-Type 标头添加到 multipart/form-data 仍然需要您设置边界。但你不需要那个。
@Wezelkrozum 谢谢！这适用于这个问题。这些文件虽然保存了一个奇怪的文件名，但没关系。现在我试图弄清楚如何将它存储到 Firebase Storage 中，因为 firebase.storage() 不像文档中所述的那样工作。无论如何谢谢
很高兴能够在您的路上为您提供帮助。我还没有使用 Firebase 存储。祝您在将文件存储到 Filebase Storage 的最后一步中好运！

标签： node.js express post fetch multipartform-data

【解决方案1】：

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

应用的更改：

index.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>

routes.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 相关的任何操作

【讨论】：