使用 Multer 时出现意外的表单结束错误

问题描述 投票:0回答:15

我正在尝试将图像(jpg/jpeg/png)从浏览器上传到 NodeJS。我已经阅读了一些教程和论坛上的许多帖子,但似乎很少有这个具体问题。

  • 我已确保将提供给 multer 的名称 (
    upload.single('upload')
    ) 与 formData 键 (
    formData.append('upload', selectedFile, selectedFile.name)
    ) 相匹配
  • 我最初尝试使用标头,但后来读到我应该排除它们。
  • 我尝试通过
    <form action="/upload" method="post" enctype="multipart/form-data">
    提交,但仍然遇到相同的错误。

我发现这个类似的问题只有一个答案不清楚 Multer 给出了意外的表单错误结束,并且这个问题 Unexpected end of form at Multipart._final 没有答案。 其他所有问题似乎都与“意外字段”或“多部分数据意外结束”错误有关,从解决方案来看,这些错误在这里无关紧要。

下面是我的代码...

浏览器:

<body>
  <input type="file" id="file_uploader" name="upload" />
  <button onclick="uploadImage()" class="btn-default">SUBMIT</button>
  
  <!-- OTHER STUFF -->

</body>
<script>
  let selectedFile;
  let uploadData = new FormData();
    
  const fileInput = document.getElementById('file_uploader');
  fileInput.onchange = () => {
    selectedFile = fileInput.files[0];
    uploadData.append('upload', selectedFile, selectedFile.name);
  }

  function uploadImage(){
    fetch('/upload', {
      method: 'POST',
      body: uploadData
    }) 
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.error('Error: ', error);
    });
  }
</script>

NodeJS

let express = require('express');
const multer = require('multer');

//multer options
const upload = multer({
  dest: './upload/',
  limits: {
    fileSize: 1000000,
  }
})

const app = express();

app.post('/upload', upload.single('upload'), (req, res) => {
  res.send();
}, (error, req, res, next) => {
  console.log(error.message);
})

exports.app = functions.https.onRequest(app);

...这是错误日志,如果有帮助的话:

Error: Unexpected end of form
>      at Multipart._final (C:\Users\p\Downloads\MyInvestmentHub\functions\node_modules\busboy\lib\types\multipart.js:588:17)
>      at callFinal (node:internal/streams/writable:694:27)
>      at prefinish (node:internal/streams/writable:723:7)
>      at finishMaybe (node:internal/streams/writable:733:5)
>      at Multipart.Writable.end (node:internal/streams/writable:631:5)
>      at onend (node:internal/streams/readable:693:10)
>      at processTicksAndRejections (node:internal/process/task_queues:78:11)

到目前为止,我还没有发布很多问题,因此,如果我遗漏了某些内容或格式错误,我深表歉意。请告诉我,我将进行适当的编辑。

谢谢。

javascript node.js express multer
15个回答
15
投票

我在使用 multer 和 next js api 时遇到了这个问题。对我有用的是,我导出了一个将 bodyParser 设置为 false 的配置,如下所示;

export const config = {
  api: {
    bodyParser: false
  }
}

13
投票

我也遇到了完全相同的错误。

在使用 multer 之前,我已经安装了

express-fileupload
。当我使用命令
npm uninstall express-fileupload
卸载它时,我可以消除该错误。

如果情况与您相同,请不要忘记删除已为

express-fileupload
模块添加的命令。 (比如要求文件上传)


5
投票

您好,我遇到了同样的问题,就是缺少

bodyParser
中间件来允许我们的请求文件解析为
Buffers

我能够像这样快速解决问题:

   var bodyParser = require('body-parser')

bodyParser.json([options])


2
投票

就我而言,原因是其他中间件。检查 multer 之前运行的其他中间件。对我来说,问题是express-openapi-validator中间件。一旦我删除了该中间件,它就按预期工作了。


1
投票

使用

body-parser
包对我有用:

const bodyParser = require('body-parser')
// ...
app.use(bodyParser()) // support encoded bodies

我的上传单文件路线:

const multer = require('multer')
const express = require('express')
const router = express()
const path = require('path') // node built-in path package

// needs "app.use(bodyParser())" middleware to work

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, process.cwd() + '/public/')
    },
    filename: function (req, file, cb) {
        // generate the public name, removing problematic characters
        const originalName = encodeURIComponent(path.parse(file.originalname).name).replace(/[^a-zA-Z0-9]/g, '')
        const timestamp = Date.now()
        const extension = path.extname(file.originalname).toLowerCase()
        cb(null, originalName + '_' + timestamp + extension)
    }
})

const upload = multer({
    storage: storage,
    limits: { fileSize: 1 * 1024 * 1024 }, // 1 Mb
    fileFilter: (req, file, callback) => {
        const acceptableExtensions = ['png', 'jpg', 'jpeg', 'jpg']
        if (!(acceptableExtensions.some(extension => 
            path.extname(file.originalname).toLowerCase() === `.${extension}`)
        )) {
            return callback(new Error(`Extension not allowed, accepted extensions are ${acceptableExtensions.join(',')}`))
        }
        callback(null, true)
    }
})

router.post('/api/upload/single', upload.single('file'), (req, res) => {
    res.status(200).json(req.file)
})

module.exports = {
    uploadRouter: router
}

1
投票

尝试将 Multer 降级至 1.4.3。这对我有用。

参见https://github.com/expressjs/multer/issues/1144


1
投票

我通过删除express fileuplod解决了这个问题


0
投票

我认为这可能是响应端造成的,所以在你的连续中间件中,你可以最后上传文件。 我这样做可以解决问题。

const upload = multer({
  dest: "./uploads",
});
app.use(upload.any());
app.post(
  "/upload",
  (req, res, next) => {
    res.end("文件上传成功");
  },
  upload.single("fileKey")
);


0
投票

尝试使用这些它有效

const express = require('express')
const app = express()
const path = require('path')
const multer = require('multer')

var filestorageEngine = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null,'./uploads')
    },
    filename:(req,file, cb) => {
        cb(null,"[maues]-" + file.originalname)
    }
})

var upload = multer({
    storage:filestorageEngine
})

app.post('/file', upload.array('file', 3),(req, res) => {
   console.log(req.file)
    res.send("file uploaded successfully")
})

app.listen(5000, ()=> {
    console.log("server running")
})

0
投票

在我的前端或客户端中删除我的请求中的标头。并确保您的输入是 formData。

例如:

let formData = new FormData();
formData.append("fileName", file);

const res = await fetch("/api/create-card", {
      method: "POST",
      body: formData,
 })

这对我有用。


0
投票

我想,问题出在

express
body-parser
模块上,我刚刚把它消除了

app.use(bodyParser.text({ type: '/' }));

并且有效!


0
投票

就我而言,我使用了 multer 中间件两次,这导致了错误。对于找不到解决方案的人,请检查您是否犯了同样的错误。


0
投票

我有同样的问题,但是我通过替换解决了问题:

app.use(express.urlencoded(extended:false))

与:

const bodyParser = require("body-parser")

app.use(bodyParser.urlencoded(extended:false))

0
投票

就我而言,更换

body: uploadData

body: uploadData.getBuffer().toString("utf8")

解决了问题。


0
投票

就我而言,我意识到我在代码中调用了 multer 中间件两次。 这是造成错误的原因。 我删除了一个,我的代码就可以使用了

© www.soinside.com 2019 - 2024. All rights reserved.