上传到 mongoDB 时图像不显示在页面中

Question

我在添加产品时遇到了两个问题。

1. 当我尝试将图像上传到数据库时，单击添加产品后没有图像显示，如下所示。
2. 如果我没有附加图像并添加到产品，它应该指向 noimage pic，但它只是在 /product_images/ 路径下创建另一个产品 ID 文件夹，没有图像。我试图安装 mkdirp 0.5.1 版也没有运气。请帮助建议。下面是我的代码。

这是我将产品发布到数据库的途径：

   router.post('/add-product', function (req, res) {

    if (!req.files) { imageFile = ""; }
    if (req.files) {

        var imageFile = typeof (req.files.image) !== "undefined " ? req.files.image.name : "";
    }

    req.checkBody('title', 'Title must have a value.').notEmpty();
    req.checkBody('desc', 'Description must have a value.').notEmpty();
    req.checkBody('price', 'Price must have a value.').isDecimal();
    req.checkBody('image', 'You must upload an image').isImage(imageFile);

    var title = req.body.title;
    var slug = title.replace(/\s+/g, '-').toLowerCase();
    var desc = req.body.desc;
    var price = req.body.price;
    var category = req.body.category;

    var errors = req.validationErrors();

    if (errors) {
        Category.find(function (err, categories) {
            res.render('add_product', {
                errors: errors,
                title: title,
                desc: desc,
                categories: categories,
                price: price
            });
        });
    } else {
        Product.findOne({ slug: slug }, function (err, product) {
            if (product) {
                req.flash('danger', 'Product title exists, choose another.');
                Category.find(function (err, categories) {
                    res.render('add_product', {
                        title: title,
                        desc: desc,
                        categories: categories,
                        price: price
                    });
                });
            } else {

                var price2 = parseFloat(price).toFixed(2);

                var product = new Product({
                    title: title,
                    slug: slug,
                    desc: desc,
                    price: price2,
                    category: category,
                    image: imageFile
                });

                product.save(function (err) {
                    if (err)
                        return console.log(err);

                    mkdirp('public/product_images/' + product._id, function (err) {
                        return console.log(err);
                    });

                    mkdirp('public/product_images/' + product._id + '/gallery', function (err) {
                        return console.log(err);
                    });

                    mkdirp('public/product_images/' + product._id + '/gallery/thumbs', function (err) {
                        return console.log(err);
                    });

                    if (imageFile != "") {
                        var productImage = req.files.image;
                        var path = 'public/product_images/' + product._id + '/' + imageFile;

                        productImage.mv(path, function (err) {
                            return console.log(err);
                        });
                    }

                    req.flash('success', 'Product added!');
                    res.redirect('/admin/products');
                });
            }
        });
    }

});

这是我的产品 ejs 文件，用于显示产品添加页面

<%- include('_layouts/adminheader'); -%>

<h2 class="page-title">Products</h2>
<a href="/admin/products/add-product" class="btn btn-primary">Add a new product</a>
<br><br>

<% if (count > 0) { %>
<table class="table table-striped alignmiddle">
    <thead>
        <tr class="home">
            <th>Product</th>
            <th>Price</th>
            <th>Category</th>
            <th>Product Image</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <% products.forEach(function(product){ %>
        <tr>
            <td><%= product.title %></td>
            <td>$<%= parseFloat(product.price).toFixed(2) %></td>
            <td><%= product.category %></td>
            <td>
                <% if (product.image == "") { %>
                <img id="noimage" src="/images/noimage.png">
                <% } else {%>
                <img id="noimage" src="/product_images/<%= product._id %>/<%= product.image %>">
                <% }%>
            </td>
            <td><a href="/admin/products/edit-product/<%= product._id %>">Edit</a></td>
            <td><a class="confirmDeletion" href="/admin/products/delete-product/<%= product._id %>">Delete</a></td>
        </tr>
        <% }); %>
    </tbody>
</table>
<% } else {%>
<h3 class="text-center">There are no products.</h3>
<% }%>

<%- include('_layouts/adminfooter'); -%>

这是我的 app.js 的公用文件夹设置

// View Engine setup

app.set('views', path.join(__dirname, "views"));
app.set("view engine", "ejs");

//// Set public folder
/*app.use(express.static(path.join(__dirname, "public")));*/
const static_path = path.join(__dirname, "../public");
app.use(express.static(static_path));

这是我的验证中间件：

customValidators:  {

     isImage: function(value, filename){
       var extension = (path.extname(filename)).toLowerCase();

       switch(extension){
        case '.jpg':
            return '.jpg';
        case '.jpeg':
            return '.jpeg'; 
        case '.png':
            return '.png'; 
        case '.':
            return 'jpg'; 

        default:
            return false; 
       }
     } 

    }

Answer 1

请检查您为图片提供的网址，它们是否正确导入。另外，如果您的文件实际上小于 16 mb，请尝试使用此转换器将格式 jpeg / png 的图像更改为保存到 mongodb 的格式。 你可以参考here 还请在问题中提及 req 正文。