上傳圖片至服務器的過程在網頁上十分常見，而MongoDB則成為了當今最流行的NoSQL數據庫之一。Vue可以很方便地結合Node.js使用，實現圖片的上傳和存儲于MongoDB之中。

首先要在Vue中實現圖片的上傳，需要使用到HTML5標準下的File API。在Vue的Component中可以將file input框所選中的文件對象存儲在data中：

data() {
return {
image: null
}
},
methods: {
handleFileUpload(event) {
this.image = event.target.files[0];
}
}

接著在視圖中使用v-on監聽file change事件，通過axios庫將圖片上傳至Node.js服務端：

<input type="file" v-on:change="handleFileUpload">
...
upload() {
let formData = new FormData();
formData.append("image", this.image);
axios.post("http://localhost:3000/upload", formData).then(response =>{
console.log("Upload success.");
});
}

將formData傳遞至Node.js服務端后，可以使用Multer庫將圖片緩存在內存中并寫入本地文件系統：

const multer = require("multer");
const storage = multer.memoryStorage(); // 在內存緩存
const upload = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 2 // 限制為2MB
},
fileFilter: function(req, file, cb) {
const filetypes = /jpeg|jpg|png/; // 限制文件類型為圖片
const mimetype = filetypes.test(file.mimetype);
const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
if (mimetype && extname) {
cb(null, true);
} else {
cb("Error: Images only.");
}
}
});
app.post("/upload", upload.single("image"), function(req, res, next) {
const image = req.file;
if (!image) {
return res.status(400).send("No file uploaded.");
} else {
fs.writeFile("./uploads/" + image.originalname, image.buffer, function(err) {
if (err) {
console.log(err);
} else {
console.log("Image written to disk.");
}
});
}
});

最后一步就是存儲文件相關信息于MongoDB之中。在Node.js服務端，使用Mongoose庫將圖片的相關信息存儲至MongoDB。

const mongoose = require("mongoose");
mongoose.connect("mongodb://localhost:27017/mydb", { useNewUrlParser: true });
const Schema = mongoose.Schema;
const imageSchema = new Schema({
originalname: String,
mimetype: String,
size: Number,
path: String
});
const Image = mongoose.model("Image", imageSchema);
app.post("/upload", upload.single("image"), function(req, res, next) {
const image = req.file;
if (!image) {
return res.status(400).send("No file uploaded.");
} else {
const newImage = new Image({
originalname: image.originalname,
mimetype: image.mimetype,
size: image.size,
path: image.path
});
newImage.save().then(() =>{
console.log("Image saved to MongoDB.");
});
}
});

至此，通過Vue、Node.js、Multer和Mongoose，就成功實現了圖片上傳和存儲于MongoDB的全過程。這是一項十分實用的技能，值得認真學習和掌握。