本系列目标

ps(本系列文章将引用ToDo List的专案去演示，抱歉稍后补上专案GitHub连结)

(本篇) multer档案上传(一)将图片存在DBmulter档案上传(二)将图片存在storagemulter档案上传(三)将图片存在第三方托管

这篇文章你将学习到

将图片存在storage，并且可以预览以及将图片渲染在EJS上面

开始实作

安装multer套件

npm install multer --save

要记得在档案的最上面引入multer

const multer = require('multer');

这步是预先将图片存入storage中做好

我们定义storage是存在public资料夹中

const storage = multer.diskStorage({    destination: function (req, file, cb) {      cb(null, 'public')    },    filename: function (req, file, cb) {      cb(null, file.fieldname + '-' + Date.now())    }  })

然后把刚刚的storage存在变数当作middleware

var upload = multer({storage: storage})

把图片存进Mongo DB

routes/index.js 加入post method

网路上爬了许多资料发现写进资料库之前，必须要先用base64给image编码才能存入

router.post('/uploadfile', upload.single('myfile'), function(req, res) {    var img = fs.readFileSync(req.file.path);    var encode_image = img.toString('base64'); //将图片做base64编码    var finalImg = {        contentType: req.file.mimetype,        image:  new Buffer(encode_image, 'base64')    };     MongoClient.connect(url, function(err, db) {        if (err) throw err;        var dbo = db.db("todolist");        dbo.collection("Images").insertOne(finalImg, function(err, res) {          if (err) throw err;          console.log("1 image inserted");          db.close();        });     });})

看一下Mongo DB是否有写入成功

输入Mongo CLI查看

因为我建立了一个collection叫做images，所以我们先列出images所有的record
打开terminal输入

$db.images.find()

成功！DB有看到base64的图片

接下来，我们要把图片从DB取出并由EJS渲染出来

routes/index.js 加入get method

这里我们注意到，res.render()是把给EJS的资料用string的方式传过去，传过去给EJS的时候再由form表单去接收base64编码的图片资料。

router.get('/', function(req, res) {    const findImages = function (db, callback) {        const collection = db.collection('Images')        const filename = "5ebb9f6f38d8f18c19b3c7a3"         collection.find({'_id': ObjectId(filename)}).sort({_id: -1}).toArray(function (err, pics) {            console.log("Find the following records on collection of images")            callback(pics)            const data = pics[0]                    res.render('index', {                  userName: "Guest",                pics: data.image.toString('base64') //注意这里将图片decode            });        })    }    MongoClient.connect(url, function (err, client) {        const db = client.db(dbName)        console.log("Connected successfully to server")        findImages(db, function () {            client.close()        })    })})

在EJS加入img Tag

views/index.ejs

这里的src是準备读取从后端传送过来base64编码的PNG图片。

<img src="data:image/png;base64,<%- pics %>"/> 

完成

我们打开网址http://localhost:3000/

今日感想

其实，将图片写进DB并不是很好的方式，会发生以下缺点：

因为base64字串太长，会导致DB查询速度变慢DB的栏位是有限(如excel一般)，可能会导致图片储存不完整

下一篇，我们将图片存入storage里面，改善以上缺点。