Multer 看不到上传的图片
Multer doesn't see uploaded image
我想在单个 post 请求中保存一张图像,这将是 MongoDB 的用户头像,还有一些用户信息使用来自 npm 的名为 multer 的包。不幸的是,只有我在控制台中看到的是错误:
TypeError: Cannot read property 'path' of undefined
register.pug
extends layout
block content
h1 Register
form(method='POST', action='/users/register')
.form-group
label Username:
input.form-control(name='firstName', type='text')
.form-group
label Email:
input.form-control(name='lastName', type='text')
.form-group
label Name:
input.form-control(name='email', type='text')
.form-group
label Password:
input.form-control(name='password', type='password')
.form-group
label Avatar:
input.file(name='avatar', id='avatar' type='file')
input.btn.btn-primary(type='submit',value='Submit')
注册路线
const upload = multer({ dest: 'uploads/avatars/' })
router.post('/register', upload.single('avatar'), (req, res, next) =>{
const firstName = req.body.name;
const lastName = req.body.name;
const email = req.body.name;
const password = req.body.name;
let avatar = {
path: req.file.path,
orginalname: req.file.orginalname
};
let newUser = new User ({
firstName: firstName,
lastName: lastName,
email: email,
password: password,
avatar: avatar
});
}
newUser.save();
});
我的代码有什么问题?
我认为您缺少此属性
enctype="multipart/form-data"
在你的表单中,试一试!
呃,花了一段时间,但我找到了原因,你需要给你的文件一个扩展名。我会把我的代码放在这里
这是我的 html 文件,我在我的应用程序中使用 ejs
模块而不是 jade
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form accept="image/x-png,image/gif,image/jpeg" enctype="multipart/form-data" action="/profile" method="post">
<input type="file" name="avatar" value="">
<input type="submit" name="" value="ssss">
</form>
</body>
</html>
这是我的 app.js
,如果 cb
函数中的目标路径不存在,它会为您创建目录。
然后是文件名,你需要给它一个扩展名,它可以像我一样.png
,或者你可以.jpeg
,随便你喜欢,但它必须是一个图像扩展。或者你可以给它 extension 你的客户给 you.
然后我们有了 upload
变量,它只是为我们设置了预先需要的功能。
var express = require('express')
var multer = require('multer')
var app = express()
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, __dirname + '/uploads') //you tell where to upload the files,
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.png')
}
})
var upload = multer({storage: storage,
onFileUploadStart: function (file) {
console.log(file.originalname + ' is starting ...')
},
});
app.set('view engine', 'ejs');
app.get('/', function(req, res, next){
res.render('mult'); //our html document
})
app.post('/profile', upload.single('avatar'), function (req, res, next) {
// req.file is the `avatar` file
console.log(req.file);
return false;
})
我想在单个 post 请求中保存一张图像,这将是 MongoDB 的用户头像,还有一些用户信息使用来自 npm 的名为 multer 的包。不幸的是,只有我在控制台中看到的是错误:
TypeError: Cannot read property 'path' of undefined
register.pug
extends layout
block content
h1 Register
form(method='POST', action='/users/register')
.form-group
label Username:
input.form-control(name='firstName', type='text')
.form-group
label Email:
input.form-control(name='lastName', type='text')
.form-group
label Name:
input.form-control(name='email', type='text')
.form-group
label Password:
input.form-control(name='password', type='password')
.form-group
label Avatar:
input.file(name='avatar', id='avatar' type='file')
input.btn.btn-primary(type='submit',value='Submit')
注册路线
const upload = multer({ dest: 'uploads/avatars/' })
router.post('/register', upload.single('avatar'), (req, res, next) =>{
const firstName = req.body.name;
const lastName = req.body.name;
const email = req.body.name;
const password = req.body.name;
let avatar = {
path: req.file.path,
orginalname: req.file.orginalname
};
let newUser = new User ({
firstName: firstName,
lastName: lastName,
email: email,
password: password,
avatar: avatar
});
}
newUser.save();
});
我的代码有什么问题?
我认为您缺少此属性
enctype="multipart/form-data"
在你的表单中,试一试!
呃,花了一段时间,但我找到了原因,你需要给你的文件一个扩展名。我会把我的代码放在这里
这是我的 html 文件,我在我的应用程序中使用 ejs
模块而不是 jade
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form accept="image/x-png,image/gif,image/jpeg" enctype="multipart/form-data" action="/profile" method="post">
<input type="file" name="avatar" value="">
<input type="submit" name="" value="ssss">
</form>
</body>
</html>
这是我的 app.js
,如果 cb
函数中的目标路径不存在,它会为您创建目录。
然后是文件名,你需要给它一个扩展名,它可以像我一样.png
,或者你可以.jpeg
,随便你喜欢,但它必须是一个图像扩展。或者你可以给它 extension 你的客户给 you.
然后我们有了 upload
变量,它只是为我们设置了预先需要的功能。
var express = require('express')
var multer = require('multer')
var app = express()
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, __dirname + '/uploads') //you tell where to upload the files,
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.png')
}
})
var upload = multer({storage: storage,
onFileUploadStart: function (file) {
console.log(file.originalname + ' is starting ...')
},
});
app.set('view engine', 'ejs');
app.get('/', function(req, res, next){
res.render('mult'); //our html document
})
app.post('/profile', upload.single('avatar'), function (req, res, next) {
// req.file is the `avatar` file
console.log(req.file);
return false;
})