javascript - 我无法使用 multer 和express 上传图像

Question

我想使用 Jade 形式上传图像，然后我想在帖子页面中显示它，问题是图像作为没有扩展名的文件上传，然后我得到 Cannot read property 'mainimage' of undefined

我的 app.js 代码如下

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');

然后是我的 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('/');
            }
        });
    }

});

这是我的 posts.jade 表单

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')

这是我想显示它的地方

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

扩展问题可能是因为在您的storage中您命名文件时不带扩展名。

要添加它，您可以将此代码插入到 storage 中方法。

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

另外，如果您没有映射目录，您可以插入 app.js到保存文件的文件夹的静态映射，如下所示:

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

然后，在您的 post 中页面，您可以直接通过 URL 访问下载的文件，使用 http://yourdomain:port/images/<filename.extension> .

希望有帮助。