我正在尝试将图像(jpg/jpeg/png)从浏览器上传到 NodeJS。我已经阅读了一些教程和论坛上的许多帖子,但似乎很少有这个具体问题。
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)
到目前为止,我还没有发布很多问题,因此,如果我遗漏了某些内容或格式错误,我深表歉意。请告诉我,我将进行适当的编辑。
谢谢。
我在使用 multer 和 next js api 时遇到了这个问题。对我有用的是,我导出了一个将 bodyParser 设置为 false 的配置,如下所示;
export const config = {
api: {
bodyParser: false
}
}
我也遇到了完全相同的错误。
在使用 multer 之前,我已经安装了
express-fileupload
。当我使用命令 npm uninstall express-fileupload
卸载它时,我可以消除该错误。
如果情况与您相同,请不要忘记删除已为
express-fileupload
模块添加的命令。 (比如要求文件上传)
您好,我遇到了同样的问题,就是缺少
bodyParser
中间件来允许我们的请求文件解析为 Buffers
。
我能够像这样快速解决问题:
var bodyParser = require('body-parser')
bodyParser.json([options])
就我而言,原因是其他中间件。检查 multer 之前运行的其他中间件。对我来说,问题是express-openapi-validator中间件。一旦我删除了该中间件,它就按预期工作了。
使用
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
}
尝试将 Multer 降级至 1.4.3。这对我有用。
我通过删除express fileuplod解决了这个问题
我认为这可能是响应端造成的,所以在你的连续中间件中,你可以最后上传文件。 我这样做可以解决问题。
const upload = multer({
dest: "./uploads",
});
app.use(upload.any());
app.post(
"/upload",
(req, res, next) => {
res.end("文件上传成功");
},
upload.single("fileKey")
);
尝试使用这些它有效
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")
})
在我的前端或客户端中删除我的请求中的标头。并确保您的输入是 formData。
例如:
let formData = new FormData();
formData.append("fileName", file);
const res = await fetch("/api/create-card", {
method: "POST",
body: formData,
})
这对我有用。
我想,问题出在
express
和body-parser
模块上,我刚刚把它消除了
app.use(bodyParser.text({ type: '/' }));
并且有效!
就我而言,我使用了 multer 中间件两次,这导致了错误。对于找不到解决方案的人,请检查您是否犯了同样的错误。
我有同样的问题,但是我通过替换解决了问题:
app.use(express.urlencoded(extended:false))
与:
const bodyParser = require("body-parser")
app.use(bodyParser.urlencoded(extended:false))
就我而言,更换
body: uploadData
到
body: uploadData.getBuffer().toString("utf8")
解决了问题。
就我而言,我意识到我在代码中调用了 multer 中间件两次。 这是造成错误的原因。 我删除了一个,我的代码就可以使用了