当尝试将 formData 转换为 express js 时，服务器无法识别 multipart/form

转换为 express js 时，服务器无法识别 multipart/form"/>

当尝试将 formData 转换为 express js 时，服务器无法识别 multipart/form

我正在尝试将表单数据上传到快速服务器。 在我的 express js 服务器上，我有以下内容：

router.post('/uploads/:id', function(req, res) {
  res.send(req.body);
  const title = req.body.title;
  const file = req.file;
});

我发回 req.body 以查看它是否正确命中了 url。 当我使用以下内容时：

const response = await fetch('', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(form) });
const responseData = await response.json();

console.log(responseData);

我得到转换为 json 的 FormData 的响应。 但是当我这样运行时：

const file = fs.createReadStream(`${desktopDir}/ai2html-output/home-pro-Artboard_1.jpg`);
const title = 'My file fsf';

const form = new FormData();
form.append('title', title);
form.append('file', file);

    const response = await fetch('', {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      body: form });
    const responseData = await response.json();

然后返回的是一个空对象： {}

我必须在我的快递服务器上设置一些东西来接收表单数据吗？我需要某种类型的中间件吗？

这也是我来自服务器的请求标头响应：

:method: POST
:path: /uploads/1234
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
content-length: 17
content-type: multipart/form-data
origin: file://
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site

要在您的

Express

multer

演示：

Server.js

const express = require("express");
app = express();
const multer = require("multer");
const upload = multer({ dest: "uploads/" });
//----------------------vvvvvvvvvvvvvvvvvvvvvv <------- middleware
app.post("/uploads/:id", upload.single("file"), function (req, res) {
  const title = req.body.title;
  console.log(req.file);
/*
Output of req.file:
{
  fieldname: 'file',
  originalname: 'test.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: 'uploads/',
  filename: '61d00f21b9813bdcb326082b41b58eb3',
  path: 'uploads\\61d00f21b9813bdcb326082b41b58eb3',
  size: 0
}
*/
  res.json({ msg: `file ${title} uploaded successfully!` });
});
app.listen(1234, () => {
  console.log("app is running on 1234");
});

上传.js

var fs = require("fs");
const fetch = require("node-fetch");
var FormData = require("form-data");

const form = new FormData();
const title = "Test";
const file = fs.createReadStream(`./test.jpg`);
form.append("title", title);
form.append("file", file);

(async () => {
  try {
    const response = await fetch("http://localhost:1234/uploads/1234", {
      method: "POST",
      //   headers: {
      //     "Content-Type": "multipart/form-data",
      //   },
      body: form,
    });
    const responseData = await response.json();
    console.log(responseData); // you got { msg: 'file Test uploaded successfully!' }
  } catch (error) {
    console.error(error);
  }
})();

注意： Fetch 会自动设置标题，所以只需带走标题

"Content-Type": "multipart/form-data"

如果要将上传的文件保存到特定文件夹“uploads/”，其标题带有req.body.title，将此配置添加到multer：

const path = require("path");
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/");
  },
  filename: (req, file, cb) => {
    const title = req.body.title;
    cb(null, title + path.extname(file.originalname));
  },
});
const upload = multer({ storage: storage });