我正在开发一个 Express.js 应用程序,并尝试添加 Multer 的图像上传功能。我遇到了一些问题,因此任何形式的帮助都将不胜感激。问题:文件未上传...
我正在开发一个 Express.js 应用程序,并尝试添加 Multer 的图像上传功能。我遇到了一些问题,因此任何形式的帮助都将不胜感激。
问题:文件没有上传,但是当我上传 .jpg 或 .png 文件时,它会显示“错误:仅限图像!”。如果未选择任何文件,则页面上必须显示“未选择文件!”,但不知何故它就是不起作用。我尝试过的方法:在 checkFileType 函数中检查文件类型和扩展名。确保表单的 enctype 属性设置为 multipart/form-data。
问题:图片上传时可能发生了什么?我该如何修复此错误?为什么它不会产生正确的消息?任何帮助/建议都将不胜感激!提前致谢!
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
// Set storage engine
const storage = multer.diskStorage({
destination: './uploads/',
filename: function(req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
// Initialize upload
const upload = multer({
storage: storage,
limits: { fileSize: 1000000 },
fileFilter: function(req, file, cb) {
checkFileType(file, cb);
}
}).single('myImage');
// Check file type
function checkFileType(file, cb) {
// Allowed ext
const filetypes = /jpeg|jpg|png|gif/;
// Check ext
const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
// Check mime
const mimetype = filetypes.test(file.mimetype);
if (mimetype && extname) {
return cb(null, true);
} else {
cb('Error: Images Only!');
}
}
// Public folder
app.use(express.static('./public'));
// Routes
app.post('/upload', (req, res) => {
upload(req, res, (err) => {
if (err) {
res.render('index', {
msg: err
});
} else {
if (req.file == undefined) {
res.render('index', {
msg: 'No file selected!'
});
} else {
res.render('index', {
msg: 'File uploaded!',
file: `uploads/${req.file.filename}`
});
}
}
});
});
// Start server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
**Index.html 代码**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Upload</title>
</head>
<body>
<h1>Upload an Image</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="myImage">
<input type="submit" value="Upload">
</form>
<% if (typeof msg != 'undefined') { %>
<p><%= msg %></p>
<% } %>
<% if (typeof file != 'undefined') { %>
<img src="<%= file %>" alt="Uploaded Image">
<% } %>
</body>
</html>