javascript - Multer 看不到上传的图片-6ren

javascript - Multer 看不到上传的图片

转载作者：行者123 更新时间：2023-11-30 11:31:56

我想在单个 post 请求中保存一张图像，这将是用户对 MongoDB 的头像，以及一些用户的信息，使用来自 npm 的名为 multer 的包。不幸的是，只有我在控制台中看到的是错误:TypeError: 无法读取未定义的属性“路径”

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();
});

我的代码有什么问题？

最佳答案

呃，花了一段时间，但我找到了原因，你需要给你的文件一个扩展名。我会把我的代码放在这里

这是我的 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，但是你喜欢，但它必须是图像扩展。或者您可以只给它您的客户给您的扩展名。

然后我们有我们的 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;
})