如何解决 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.");
});

路由/user.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);

  });
}

形式

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_modulesbusboylibtypesmultipart.js:588:17)

如果我将 multipart/form-data 删除为 Content-Type ,则表单提交没有问题,但没有文件。我猜这与接收 formData 对象的方式有关。

stack overflow How to solve Multer Error: Unexpected end of form?
原文答案

答案:

作者头像

@SReca ,今天刚遇到这个问题,希望我能在这里帮助你和其他阅读本文的人。

解决 Unexpected end of form

关于 Unexpected end of form 的原始问题,您删除 Content-Type 作为解决方案是正确的。这是因为使用常规 Fetch 或 XMLHttpRequest 发送 FormData() 将自动获得浏览器设置的标头。浏览器还将附加所有 boundary 请求中所需的 multipart/form-data ,以指示表单何时开始和结束。更多细节可以在 MDN 的文档中找到关于 [Using FormData Objects](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects#:%7E:text=the%20open() %20call.-,Warning,-%3A%20When%20using)... 有一个警告关于显式设置 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>'));

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

相关问题