使用multer搭建一個圖片接收服務器

爲了測試圖片上傳插件的上傳功能是否好用，最近嘗試搭建了一個接收圖片的服務器，由於圖片上傳的編碼格式是form-data，因此我選擇使用express+multer，實現過程當中發現有幾個須要注意的地方，在這裏和你們分享下。

1 引入express和multer

這裏沒什麼好說的，安裝好包文件後，引入文件。

var express = require('express'),
    multer = require('multer');

2 設置圖片的存儲路徑

multer方法接受一個options對象，其中就有一項dest用來設置存儲路徑的。這裏有些同窗可能會遇到疑問，發現本身使用dest接收的圖片文件打不開，都是一串不知名的文件，以下圖。

若是咱們在後臺把接收的文件對象打印出來，會發現這是由於沒有爲文件制定後綴名。

若是咱們想進行更完整的定製，須要使用diskstorage方法，具體代碼以下。

var app = express();
var storge = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads')
    },
    filename: function (req, file, cb) {
        var fileformat = (file.originalname).split('.');
        cb(null, file.fieldname+'-'+Date.now()+'.'+fileformat[fileformat.length-1]);
    }
})

這樣咱們接收到的圖片就會有後綴名了。

3 處理請求

express的路由方式很簡便，代碼以下

app.post('/', upload.array('files',20), function (req, res, next) {
    console.log(req.files);
    res.send('img received');
})

這裏須要注意的地方就是app.post方法的參數，第一個參數是客戶端請求的路徑，好比表單的action屬性是'/'，那這裏的第一個參數就應該設置爲'/'，第二個參數也要注意，array方法的第一個參數是客戶端表單的name屬性，好比表單input元素的name屬性是'files'，這裏就應該設置爲‘files’，不然會報錯以下信息。

4 總結

multer的使用方法主要須要注意兩個地方，一是設置路徑的同時須要設置後綴名，二是處理請求的時候，須要對應字段的name屬性。下面附上完整代碼。

var express = require('express'),
    multer = require('multer');

var app = express();
var storge = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads')
    },
    filename: function (req, file, cb) {
        var fileformat = (file.originalname).split('.');
        cb(null, file.fieldname+'-'+Date.now()+'.'+fileformat[fileformat.length-1]);
    }
})

var upload = multer({storage: storge})
app.use(express.static('./static'));

app.post('/', upload.array('file',20), function (req, res, next) {
    console.log(req.files);
    res.send('abc');
})

app.listen(3000)

5 參考目錄

https://github.com/expressjs/multer
http://www.cnblogs.com/chyingp/p/express-multer-file-upload.html
https://segmentfault.com/q/1010000005644324