如何解决 Multer 错误：意外的表单结束？

我发现了有关 Multer 的其他类似问题，但没有答案。我正在尝试使用 next.js （前端）和 node.js （后端）上传文件。使用开发工具时，数据是通过网络选项卡发布的。

以下是我的设置：

app.js

const express = require('express');
const bodyParser = require('body-parser');

// Get routes
const routeUser = require('./routes/user');

// Create an express server
var app = express();

// Add necessary middleware
app.use(bodyParser.urlencoded({ extended: true })); // Support encoded bodies
app.use(bodyParser.json({
  type: ["application/x-www-form-urlencoded", "application/json"], // Support json encoded bodies
}));

// Custom routes
routeUser(app);

// Start server on port 1234
app.listen(1234, () => {
  console.log("API is running.");
});

路线/用户.js

const multer = require('multer');

module.exports = function(app) {

  const upload = multer({
    storage: multer.diskStorage({
      destination: (req, file, cb) => {
        cb(null, "./user_photos");
      },
      filename: (req, file, cb) => {
        cb(null, file.originalname)
      }
    })
  });

  app.post('/user/update', upload.single('user_photo'), (req, res) => {

    console.log(req.body, req.file);

  });
}

Form

submit(event) {
  event.preventDefault();
  let form_values = new FormData(event.target);
  fetch(this.props.env.api + "/user/update", {
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data; boundary=MyBoundary',
    },
    body: form_values
  }).then((response) => {
    return response.json();
  }).then((response) => {
    console.log(response);
  });
}

------

<form onSubmit={this.submit}>
  <input type="file" name="user_photo"/>
  <button type="submit">Upload</button>
</form>

我已经尝试了几个教程，我正在根据文档进行设置，但我不断收到以下错误：

Error: Unexpected end of form
    at Multipart._final (...\node_modules\busboy\lib\types\multipart.js:588:17)

如果我删除multipart/form-data as Content-Type，表单提交没有问题，但没有文件。我猜这与方式有关formData正在接收对象。

Hey @SReca，今天刚刚遇到这个问题，希望我可以帮助您和其他阅读本文的人。

解决Unexpected end of form

关于最初的问题Unexpected end of form，你删除是正确的Content-Type作为解决方案。这是因为发送FormData()使用常规 Fetch 或 XMLHttpRequest 将自动由浏览器设置标头。浏览器还将附加boundary全部都需要multipart/form-data按顺序请求指示表单何时开始和结束。更多详细信息可以在 MDN 的文档中找到使用 FormData 对象...有关于显式设置的警告Content-Type.

可能修复丢失的文件

现在，关于丢失的文件，它可能对您期望的路径有错误的引用。我没有使用diskStorage，但我用的是常规的dest选择保存我的文件并遇到了同样的问题（想要将图像保存到./assets/images). 对我有用的是提供完整的目录路径。也许将目标属性中的回调函数更改为

// Assuming the the path module is 'required' or 'imported' beforehand
cb(null, path.resolve(__dirname, '<path-to-desired-folder>'));

将解决问题。希望这可以帮助！