node.js - 使用 mongoose、nodeJS、express、react 从 mongoDB 获取图像

Question

我一直在研究以下指南来上传和从 mongoDB 获取图像，并且在获取图像后在反应页面上重新显示时遇到问题。我认为问题出在 HTML img src 上，但它可能会更进一步，所以我无法完成我所做的一切。

服务器.js

// --------------------  Mongoose schema -------------------
var imageSchema = new mongoose.Schema({
    img:
    {
        data: Buffer,
        contentType: String
    }
});
const offeringSchema = new mongoose.Schema({
    image: [imageSchema]
});
const Image = mongoose.model("Image", imageSchema)
const Offering = mongoose.model("Offering", offeringSchema);

// --------------------  Set up Multer -------------------
const storage = multer.diskStorage({
    destination: './public/uploads/images',
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() +
            path.extname(file.originalname));
    }
});

// --------------------  Post Offering Data -------------------
// upload featured offering image
app.post('/admin/OfferingFeatureImage', upload.single('featuredImage'), function (req, res) {
    if (req.isAuthenticated()) {
        if (req.user.userData[0].admin === true) {
            console.log(req.file);
            var newImage = new Image();
            newImage.img.data = fs.readFileSync(req.file.path)
            newImage.img.contentType = 'image/png';
            Offering.updateOne({ _id: req.body.offeringID }, {image:[newImage]}, function (err) {
                if (err) {
                    console.log(err)
                } else {
                    res.redirect("/Admin/Offerings");
                }
            })
        } else {
            res.send("not-privileged")
        }
    } else {
        res.redirect("/login")
    };
});

// --------------------  Get Offering Data -------------------
app.get("/data/allInvestment", function (req, res) {
    Offering.find({}, function (err, foundOfferings) {
        if (err) {
            res.send(err);
        } else {
            res.send(foundOfferings);
        };
    });
});

在客户端，我能够获取产品数据并看到 img 数据似乎存在

客户端数据

{props.investmentsData.image[0] !== undefined &&
                    <img src={"data:" + props.investmentsData.image[0].img.contentType + ";base64," + props.investmentsData.image[0].img.data.toString('base64')} className="card-img-top" alt="..."></img>
                }

结果

标签： node.jsreactjsexpressmongoose