Question

我正在建立一个电子商务网站。目前，我们正在使用multer上传图像，其余数据已保存在mongodb中。所有数据都正确上传，但是当我尝试从文件夹/公共/图像获取图像时，没有任何作用。任何帮助将不胜感激。

这是我的multer代码

app.post('/addProduct', function(req, res){    
upload(req,res,(err)=>{

            if(err){
                res.render('addproduct',{
                    mesg: err
                });
            }
                new product({
                    _id: new mongoose.Types.ObjectId(),
                     image:req.body.image,
                     name: req.body.name,
                     price:  req.body.price,
                     description: req.body.description,
                     category: req.body.category,
                 }).save(function(err)
                 {
                     if(err){
                         console.log(err);
                         res.render('addProduct')
                     }else{
                     res.redirect('/products');
                 }
                 })
            });
        })
        //all function for uploading images and checking file
    //storage engine
    const storage= multer.diskStorage({
        destination: './Public/images/',
        filename: function(req, file, cb){
            cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
        }   
    });
    //upload method
    const upload = multer({
        storage: storage
    }).single('image');
};

这是用于从./public/image文件夹中获取文件的代码

    <div class= "two row">   
                    <% products.forEach(product => { %>
                        <div class="column">

                                <img src="./Public/images/<%req.files[0].filename%>" class="cover-img">
                                <p><%= product.name %></p>
                                <h3>&dollar;<%= product.price %></h3>
                             <!---  <p><%= product.description %></p>-->
                        </div>
                   <% }); %>

addProduct.ejs代码

<div class= "two row" onclick="">  
                <% products.forEach(product => { %>
                    <div class="column">
                        <img src="/images/<%req.files[0].filename%>" class="cover-img">
                            <p><%= product.name %></p>
                            <h3>&dollar;<%= product.price %></h3>
                         <a action="/products/productId"></a><button class="btn">Add to cart</button></a>
                         <!---  <p><%= product.description %></p>-->
                    </div>
               <% }); %>

Answer 1

我认为您不需要在资产路径前加Public。因此，您的<img>的src可以是：

<img src="/images/<%req.files[0].filename%>" class="cover-img">

但是，为Express应用程序设置静态资产很重要。看看如何完成。

您真正要做的就是拥有：

app.use(express.static('Public'))

“快速”应用顶部的某个位置。

如何从文件夹中获取图像以在ejs中呈现

1 个答案: