NodeJS实现图片上传代码(Express)
文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始。 页面样式Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片: 上传图片样式:CSS样式:background-image: url(../../images/rv/add.jpg);
background-repeat: no-repeat; width: 180px; height: 200px; padding-bottom: 10px; display: inline-block; vertical-align: middle; .fileupload {
} } Html点击上传有两种比较常用的方式iFrame上传和Ajax上传,本文采用了Ajax上传是HTML5提出了XMLHttpRequest对象的第二版,传递文件数据主要是通过FormData实现: / Act on the event /
if ($('.fileupload').val().length) {
} }); 服务端保存NodeJS服务端保存需要使用了第三方插件node-formidable,npm安装地址: 上传图片 exports.upload = function(req,res) {
var currentUser = req.session.user; var userDirPath =cacheFolder+ currentUser.id; if (!fs.existsSync(userDirPath)) {
} var form = new formidable.IncomingForm(); //创建上传表单 form.encoding = 'utf-8'; //设置编辑 form.uploadDir = userDirPath; //设置上传目录 form.keepExtensions = true; //保留后缀 form.maxFieldsSize = 2 1024 1024; //文件大小 form.type = true; var displayUrl; form.parse(req,function(err,fields,files) {
}); }; 不同用户上传置放在不同的位置,根据需求来设置,当然也有可以每张图片都给不同的id编号,推荐第三方uuid插件:https://github.com/broofa/node-uuid 文件重命名: 文件上传进度: });
node-formidable有很多官方API还有很多设置的选项,本文根据需求设置了几项,有额外需求的可以参考官方地址~ 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |