图片不使用 multer 上传

Question

好的，所以在我的应用程序中，我尝试允许使用 multer 上传图片。我的应用程序是使用 node.js 构建的，我的数据库使用的是 mongodb。当我创建帐户并为头像图像选择图像时，它会创建帐户但会自动使用我设置的 no-image.png 文件，以防有人没有选择图像。这是代码......任何帮助都会很棒。

    // handle signup logic
    router.post("/register", function(req, res) {
      upload(req, res, function(err) {
        if(err){
          req.flash("error", err.message);
          return res.redirect("/register");
        }
        var newUser = new User({
          username: req.body.username,
          firstName: req.body.firstName,
          lastName: req.body.lastName,
          email: req.body.email,
          bio: req.body.bio
        });

        if(typeof req.file !== "undefined") {
          newUser.avatar = '/uploads/userImg/' + req.file.filename;
        } else {
          newUser.avatar = '/uploads/userImg/no-image.png';
        }
        console.log(newUser);
        if(req.body.adminCode === process.env.ADMINCODE) {
          newUser.isAdmin = true;
        }

        if(req.body.answer !== process.env.SECRET){
          req.flash("error", "answer the question");
          return res.redirect("back");
        } else {
          User.register(newUser, req.body.password, function(err, user){
            if(err){
              return res.render("register", {error: err.message});
            }
            passport.authenticate("local")(req, res, function(){
              req.flash("success", "Welcome to Let's Camp " + user.username);
              res.redirect("/campgrounds"); 
            }); 
          });
        }
      });
    });



    var multer = require("multer");
    var storage =   multer.diskStorage({
      destination: function(req, file, callback) {
        callback(null, './public/uploads/userImg');
       },
      filename: function(req, file, callback) {
        callback(null, Date.now() + file.originalname);
      }
    });
    var upload = multer({ storage : storage}).single('image');



<% include ./partials/header %>

    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
          <form action="/register" method="post">
            <h1 class="text-center">Sign Up</h1>
        </div>
        <div class="row">
          <div class="col-xs-4 col-xs-offset-2">
            <div class="form-group">
              <label for="firstName">First Name</label>
              <input id="firstName" class="form-control" type="text" name="firstName" placeholder="First Name*" required>
            </div>
          </div>
          <div class="col-xs-4 col-xs-offset-0">
            <div class="form-group">
              <label for="lastName">Last Name</label>
              <input id="lastName" class="form-control" type="text" name="lastName" placeholder="Last Name*" required>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4 col-xs-offset-2">
            <div class="form-group">
              <label for="email">Email</label>
              <input id="email" class="form-control" type="email" name="email" placeholder="Email*" required>
            </div>
          </div>
          <div class="col-xs-4 col-xs-offset-0">
            <div class="form-group">
              <label for="avatar">Avatar Image URL</label>
              <input id="avatar" class="form-control" type="file" name="avatar">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4 col-xs-offset-2">
            <div class="form-group">
              <label for="username">Username</label>
              <input id="username" class="form-control" type="text" name="username" placeholder="Username*" required>
            </div>
          </div>
          <div class="col-xs-4 col-xs-offset-0">
            <div class="form-group">
              <label for="password">Password</label>
              <input id="password" class="form-control" type="password" name="password" placeholder="Password*" required>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-8 col-xs-offset-2">
            <div class="form-group">
              <label for="bio">Bio</label>
              <textarea id="bio" class="form-control" type="bio" name="bio" rows="5" placeholder="Write a short description of yourself and what you enjoy about camping."></textarea>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4 col-xs-offset-2">
            <div class="form-group">
              <label for="adminCode">Admin Code</label>
              <input id="adminCode" class="form-control" type="text" name="adminCode" placeholder="Admin Code">
            </div>
          </div>
          <div class="col-xs-4 col-xs-offset-0">
            <div class="form-group">
              <label for="number">Enter: I Love Camping</label>
              <input id="number" class="form-control" type="text" name="answer" placeholder="Answer*" required>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-8 col-xs-offset-2">
            <div class="form-group">
              <button class="btn btn-lg btn-primary btn-block">Sign Up!</button>
            </div>
            <a href="/campgrounds">Go Back</a>
            </form>
          </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <p class="text-center"><strong>*</strong> indicates a required field.</p>
            </div>
        </div>
      </div>

    <% include ./partials/footer %>

如果我使用 enctype="multipart/form-data" 我会因为某种原因收到错误，但如果我不使用它，它会完成，但图像仍然没有上传。只是恢复到 no-image.png

Answer 1

如果你想发布文件你必须使用entype="multipart/form-data":

<form action="/register" method="post" enctype="multipart/form-data">

如果您还有其他问题，请解决该问题。

来自documentation：

.single(字段名)

接受名称为 fieldname 的单个文件。单个文件将存储在 req.file 中。

所以像这样创建上传方法并在您的路由器中调用它：

var uploadAvatar = multer({ storage : storage}).single('avatar');

或重命名您的输入文件name="image"：

<input id="avatar" class="form-control" type="file" name="image">