为了测试图片上传插件的上传功能是否好用,最近尝试搭建了一个接收图片的服务器,由于图片上传的编码格式是form-data,因此我选择使用express+multer,实现过程当中发现有几个须要注意的地方,在这里和你们分享下。html
这里没什么好说的,安装好包文件后,引入文件。git
var express = require('express'), multer = require('multer');
multer方法接受一个options对象,其中就有一项dest用来设置存储路径的。这里有些同窗可能会遇到疑问,发现本身使用dest接收的图片文件打不开,都是一串不知名的文件,以下图。
若是咱们在后台把接收的文件对象打印出来,会发现这是由于没有为文件制定后缀名。
若是咱们想进行更完整的定制,须要使用diskstorage方法,具体代码以下。github
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]); } })
这样咱们接收到的图片就会有后缀名了。
express
express的路由方式很简便,代码以下segmentfault
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’,不然会报错以下信息。
服务器
multer的使用方法主要须要注意两个地方,一是设置路径的同时须要设置后缀名,二是处理请求的时候,须要对应字段的name属性。下面附上完整代码。app
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)
https://github.com/expressjs/multer
http://www.cnblogs.com/chyingp/p/express-multer-file-upload.html
https://segmentfault.com/q/1010000005644324post