Ich kann keine Bilder mit Multer und Express hochladen

Question

Ich möchte Bild mit einem Jade-Formular hochladen, dann möchte ich es in einer Posts-Seite zeigen das Problem ist, die Bilder werden als Dateien ohne Erweiterung hochgeladen und dann kann ich nicht lesen Eigenschaft 'Mainimage' undefinierter

Code Meine app.js unter

var storage = multer.diskStorage({ 
    destination: function (req, file, callback) { 
     callback(null, './public/images/uploads/'); 
    }, 
    filename: function (req, file, callback) { 
     callback(null, file.fieldname + '-' + Date.now()); 
    } 
}); 

var upload = multer({storage: storage}).single('mainimage'); 

Dann ist mein posts.js

router.post('/add', function(req, res, nect){ 
    // Get The Form Values 
    var title  = req.body.title; 
    var category = req.body.category; 
    var body  = req.body.body; 
    var author  = req.body.author; 
    var date  = new Date(); 

    if(req.file.mainimage){ 
     var mainImageOriginalName = req.file.mainimage.originalname; 
     var mainImageName   = req.file.mainimage.name; 
     var mainImageMime   = req.file.mainimage.mimetype; 
     var mainImagePath   = req.file.mainimage.path; 
     var mainImageExt   = req.file.mainimage.extension; 
     var mainImageSize   = req.file.mainimage.size; 
    } else{ 
     var mainImageName = 'noimage.png'; 
    } 

    //Form Validation 
    req.checkBody('title', 'Title field is required').notEmpty(); 
    req.checkBody('body', 'Body field is required'); 

    //Check errors 
    var errors = req.validationErrors(); 
    if(errors){ 
    res.render('addpost',{ 
     "errors": errors, 
     "title": title, 
     "body": body 
    }); 
    } else{ 
     var posts = db.get('posts'); 

     //submit to db 
     posts.insert({ 
      "title": title, 
      "body": body, 
      "category": category, 
      "date": date, 
      "author": author, 
      "mainimage": mainImageName 
     }, function(err, post){ 
      if(err){ 
       res.send('There was an issue submitting the post'); 
      } else{ 
       req.flash('success', 'Post Submitted'); 
       res.location('/'); 
       res.redirect('/'); 
      } 
     }); 
    } 

}); 

Und das ist mein posts.jade Formular

form(method='post', action='/posts/add', enctype='multipart/form-data') 
     .form-group 
      label Title: 
      input.form-control(name='title', type='text') 
     .form-group 
      label Category 
      select.form-control(name='category') 
       each category, i in categories 
        option(value='#{category.title}') #{category.title} 
     .form-group 
      label Body 
      textarea.form-control(name='body', id='body') 
     .form-group 
      label Main Image: 
      input.form-control(name='mainimage', type='file', id='mainimage') 

Und hier ist, wo ich es angezeigt werden soll, weil

each post, i in posts 
      .posts 
       h1 
        a(href='/posts/show/#{post._id}') 
         =post.title 
       p.meta Posted in #{post.category} by #{post.author} on #{moment(post.date).format('MM-DD-YYYY')} 
       img(src='/images/uploads/#{post.mainimage}') 
       !=post.body 
       a.more(href='/posts/show/#{post._id}') Read More 

Answer 1

Das Problem Erweiterung ist wahrscheinlich in Ihrem storage Sie Ihre Dateinamen ohne die Erweiterung.

Um es hinzuzufügen, können Sie diesen Code in Ihre storage Methode einfügen.

filename: function (req, file, callback) { 
    var extension = file.mimetype; 
    extension = extension.substring(extension.indexOf("/")+1, extension.length); 
    var filename = file.fieldname + '-' + Date.now() + "." + extension; 
    callback(null, filename); 
} 

Auch, wenn Sie Ihr Verzeichnis zugeordnet nicht haben, können Sie in Ihnen app.js eine statische Zuordnung in den Ordner einfügen, wo Sie die Datei gespeichert, wie folgt aus:

app.use('/images', express.static(path.join(__dirname, 'images'))); 

Dann in Ihre post Seite Sie können auf die heruntergeladene Datei direkt über ihre URL zugreifen, mit http://yourdomain:port/images/<filename.extension>.

Ich hoffe, es hilft.