nodejs图片上传
node中图片上传的中间键很多,比如formidable等,这里我们使用nodejs中的fs来实现文件上传处理:
1、安装中间键connect-multiparty
npm install connect-multiparty
通过connect-multiparty中间键我们可以实现req.files的功能,这样可以拿到上传文件的大小、类型等一系列参数,对其进行判断,从而达到限制上传的目的。
2、connect-multiparty的使用
var multipart = require('connect-multiparty'); var multipartMiddleware = multipart();
....
router.post('/upload', multipartMiddleware, function (req, res) {
....
}
在需要引入的js页面顶部引入上面代码,再在相应的路由中如上引入,然后通过req.files即可直接获取上传的文件参数。
3、完整实例:
index2.html文件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件上传实例</title> </head> <body> <form enctype="multipart/form-data" action="/upload" method="post"> <input type="file" name="uploadFile" id="upload" /> <input type="submit" value="上传"/> </form> </body> </html>
app.js配置:
var routes = require('./routes/index');
...
//设置post文件大小
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
app.set('views', path.join(__dirname, 'views'));
var template = require('art-template');
template.config('base', '');
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');
...
app.use('/', routes);
index.js文件:
/** * Created by chaozhou on 2015/11/9. */ var express = require('express'); var router = express.Router(); var tags = require('../modules/tag.js'); var multipart = require('connect-multiparty'); var multipartMiddleware = multipart(); var fs = require("fs"); router.get('/', function(req, res, next) { res.render("index2"); }); router.post('/upload', multipartMiddleware,function(req, res) { var type = req.files.uploadFile.type; var size = req.files.uploadFile.size; var maxSize = 800 * 1024; //800K type = type.split("/")[1]; if (type != "jpeg" && type != "jpg" && type != "png") { res.send({"errMsg": "请上传png、jpg、jpeg格式照片"}); return; } else if (size > maxSize) { res.send({"errMsg": "图片大小不要超过800K"}); return; } else if (type == "jpeg" || type == "jpg" || type == "png" && size < maxSize) { fs.readFile(req.files.uploadFile.path, function (err, data) { if (err) { res.send({"errMsg": "'图片上传失败'"}); return; } var base64str = new Buffer(data).toString('base64'); //图片转字节 fs.writeFileSync("public/upload/" + "upload."+type, base64str, 'base64'); //写入本地 res.send("<input type='image' src='/upload/upload."+type+"'/>"); }); } }); module.exports = router;
在public目录下新建upload上传文件夹,上传的图片统一放在这里:
浏览器上传效果:
上传成功!
作者:程序员小波与Bug
出处:https://codetrips.cn
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。如有问题,可以邮件:caiya928@aliyun.com
QQ:1419901425 联系我
如果喜欢我的文章,请关注我的公众号:程序员小波与Bug