前言
- 上传文件是很常见的需求,我们的express当然少不了这个功能。
- multer是最常见的express上传中间件。下面介绍使用multer实现文件上传处理操作。
简单介绍
习惯简单看一下官方文档,然后直接撸代码。好,先看一下官方文档介绍。见地址(https://github.com/expressjs/multer)。直接把基本的使用例子copy到自己到编辑器中。然后加以修改。
var express = require('express')
var multer = require('multer')
var upload = multer({ dest: 'uploads/' })
var app = express()
// 上传单文件
app.post('/profile', upload.single('avatar'), function (req, res, next) {
// req.file is the `avatar` file
// req.body will hold the text fields, if there were any
})
// 上传多文件
app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
// req.files is array of `photos` files
// req.body will contain the text fields, if there were any
})
// 单文件和多文件
var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
// req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
//
// e.g.
// req.files['avatar'][0] -> File
// req.files['gallery'] -> Array
//
// req.body will contain the text fields, if there were any
})
app.get('/', function (req, res, next) {
res.sendfile('form.html');
})
app.listen(3000, function () {
console.log('监听3000端口成功');
})
我把官方例子copy之后就只是加了一个启动服务器和请求文件的代码。很简单是吧~~。
- 然后在代码目录下面新建一个form.html文件用来测试我们的上传系统。
- 代码如下
uploadfile
multer uplpad file
- 需要注意的是上面代码的input的name要和后端如果是单文件就要和单文件的name一致。如果是多文件就要和多文件的name一致。你懂的。
- 然后启动node app
实战练习
- 单文件修改文件名
经过上面的练习,我们会发现上传单文件之后,文件是存在服务器upload目录下面,但是文件名是一串看不懂的字符串。所以我们需要把文件名改为我们需要的名字
- 查看文挡我们采用diskStorage
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '/tmp/my-uploads')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
var upload = multer({ storage: storage })
这样就可以通过filename改文件名了这里我文件名没有后缀,我给文件名把后缀加上。
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + file.originalname.match('\.*'));
}
})
上传多文件
- 给input标签添加multiple属性
然后就可以上传多时候用shift或者control选中多张进行上传了。如果不支持这个属性,就需要操作dom生成多个input,获取文件名可以使用jquery获取文件input对像,然后再获取他的name即可。
选中多个文件,统一上传
参考(http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/)这段代码,让我有了思路,只需要把每次选择文件的信息保留下来。
funGetFiles: function(e) {
this.funDragHover(e);
var files = e.target.files || e.dataTransfer.files;
this.fileFilter = this.fileFilter.concat(this.filter(files));
this.funDealFiles();
return this;
}
这样就可以了,然后就可以进行处理,由你定,现实缩略图的什么的,或者删除。
- 删除。就是可以把文件的下标存到标签中,然后就可以根据下标找到队列里相应的文件进行删除。
- 缩略图。使用html5的FileReader对象
var reader = new FileReader();
reader.onload = function (e) {
var thumbnail = e.target.result;
}
总结
- 以需求导向直接开始写代码,看代码。不懂再去查文档。效率更高
参考链接
- 我的源代码地址:https://github.com/suyunxue/demo/tree/master/multerUploadFile
- multer官方文档(https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md)
- 参考博文(http://www.cnblogs.com/chyingp/p/express-multer-file-upload.html)
- 参考博文( http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/)
- 参考代码(http://www.zhangxinxu.com/study/201109/html5-file-image-ajax-upload.html)
- MDNFileReader文档,查看例子(https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)
- 读取文件api(http://javascript.ruanyifeng.com/htmlapi/file.html)