2017-12-10 12 views
1

私のアプリでは、私はイメージのアップロードをmulterを使用して許可しようとしています。私のアプリはnode.jsを使って構築され、私のデータベースはmongodbを使っています。アカウントを作成してアバター画像用の画像を選択すると、アカウントが作成されますが、誰かが画像を選択しない場合に備えてno-image.pngファイルが自動的に使用されます。ここにコードがあります...どんな助けも素晴らしいでしょう。私はENCTYPE =「multipart/form-data」を使用している場合イメージは、multerを使用してアップロードしません

// 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 %> 

は、私はいくつかの理由でエラーが発生しますが、私はそれを残せば、それは完了したが、静止画像doesntのアップロード。あなたはとてもその問題を解決する他の問題をしている場合

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

:あなたはentype="multipart/form-data"を使用するようにしたファイルを投稿したい場合は、単に無image.png

+0

あなたはあなたが 'アップロードを定義した方法をあなたの質問に追加することができます'メソッド? – num8er

+1

私はちょうどした...私はちょうど元の投稿の底にそれを添付...ありがとう –

+0

@DarrellPawsonコードが正しいです、フロントエンドをチェックする必要があります。どのようにファイルを送信するのですか? enctype = multipart/form-dataのシンプルなフォーム?またはajax以上? – num8er

答えて

0

に戻ります。 documentationから

.single(フィールド名)

名前のフィールド名を持つ単一のファイルを受け入れます。 1つのファイルはreq.fileに格納されます。

したがって、このようなアップロード方法を作成して、あなたのルータにそれを呼び出す:

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

またはあなたの入力ファイルname="image"名前を変更します。

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

私はそれを考え出しました。さて、私はアップロードを定義しているときに.single( 'イメージ')が混乱していたものでした。 htmlフォームではアバターというラベルが付けられていましたので、enctype = "multipart/form-data"をフォームタグに追加すると、予期しないフィールドが表示されていました。それを.single( 'avatar')に変更したときに動作します。 –

+1

私は今3日間これを乱している...助けをありがとう –

+0

@DarrellPawsonは私が今書いていた:D – num8er

関連する問題