我正在構建一個初學者全堆疊專案，我正在創建一個網上商店。在這里，我有一個管理路徑，我可以將新產品上傳到我的 mongoDB 資料庫，以便它們顯示在商店中。像任何好的網上商店一樣，我需要圖片來展示我的產品，但我很難為該功能撰寫代碼。我知道有一個叫做 GridFS 的東西，但是我的影像永遠不會超過 16 MB，所以我不想讓我的解決方案過于復雜。
有關我遇到的具體問題，請參閱我的代碼中箭頭下方的注釋
我的產品架構：
const mongoose = require("mongoose");
const UserSchema = new mongoose.Schema({
productName: {type: String, required: true, unique: true},
image: {data: Buffer, contentType: String},
price: {type: Number, required: true}
}, {timestamps: true});
module.exports = mongoose.model("Product", UserSchema);
添加新產品路線：
const router = require("express").Router(); //
const Product = require("../models/Product"); //
//
router.post("/add", async (req, res) => { // // //
const newProduct = new Product({ // / //
productName: req.body.productName, //
image: { // this is where I have no idea what I am doing
data: req.body.image, // req.body.image is just the filename, do I need the entire path?
contentType: 'image/png' // not all images are png, how do I update this depending on image type?
},
price: req.body.price
});
try {
const savedProduct = await newProduct.save();
res.redirect("../products");
} catch (err) {
console.log(err);
console.log("an error occured when adding product");
res.redirect(400, "../products");
}
});
展示產品頁面：
<% products.forEach(product => { %>
<article>
<h2><%= product.productName %></h2>
<div class="price"><%= product.price %></div>
<img src="<%= product.image %>" alt="">
</article>
<% }) %>
uj5u.com熱心網友回復：
您可以使用中間件包express-fileupload來處理檔案上傳。這是包Link的檔案。
假設影像的輸入名稱是image，您可以從 訪問影像的資訊req.files.image。此物件包含在緩沖區中表示的檔案及其 mimetype。現在您可以將這兩個資訊存盤在資料庫中，如下所示：
router.post("/add", async (req, res) => {
const img = req.files.image;
const newProduct = new Product({
productName: req.body.productName,
image: {
data: img.data, // buffer
contentType: img.mimetype
},
price: req.body.price
});
try {
const savedProduct = await newProduct.save();
res.redirect("../products");
} catch (err) {
console.log(err);
console.log("an error occured when adding product");
res.redirect(400, "../products");
}
});
當您想在 html 頁面上顯示此影像時，您必須將緩沖區轉換為 base64 表示。您可以簡單地使用.toString("base64")從資料庫中檢索到的緩沖區資料。的值src應采用以下格式data:[<mediatype>][;base64],<data> 參考：
<% products.forEach(product => { %>
<article>
<h2><%= product.productName %></h2>
<div class="price"><%= product.price %></div>
<img src="data:<%= product.image.contentType%>;base64,<%= product.image.data.toString('base64')%>" alt="">
</article>
<% }) %>
我沒試過但是如果ejs檔案中的代碼拋出錯誤，嘗試將影像以base64編碼存盤在資料庫中，然后product.image.data直接在ejs檔案中使用
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/431861.html