文件上传是每个网站不可避免的，最近需要做些上传图片的功能，主要解决两个问题，一个是文件上传样式和服务端路径保存，功能很简单，做起来倒是没那么简单，先从最简单的页面的上传页面的样式开始。
页面样式
Html页面默认的上传的是比较难看的，需要重做一个背景图片，通过背景图片添加上传的图片:
background-repeat: no-repeat;
width: 180px;
height: 200px;
padding-bottom: 10px;
display: inline-block;
vertical-align: middle;
.fileupload {
opacity: 0;
filter: alpha(opacity=0);
width: 200px;
height: 200px;}
}
Html点击上传有两种比较常用的方式iFrame上传和Ajax上传，本文采用了Ajax上传是HTML5提出了XMLHttpRequest对象的第二版，传递文件数据主要是通过FormData实现:
if ($('.fileupload').val().length) {
var fileName = $('.fileupload').val();
var extension = fileName.substring(fileName.lastIndexOf('.'),fileName.length).toLowerCase();
if (extension == ".jpg" || extension == ".png") {
var data = new FormData();
data.append('upload',$('#fileToUpload')[0].files[0]);
$.ajax({
url: 'apply/upload',type: 'POST',data: data,cache: false,contentType: false,//不可缺参数
processData: false,//不可缺参数
success: function(data) {
console.log(data);
},error: function() {
console.log('error');
}
});
} }
});
NodeJS服务端保存需要使用了第三方插件node-formidable，npm安装地址:
var currentUser = req.session.user;
var userDirPath =cacheFolder+ currentUser.id;
if (!fs.existsSync(userDirPath)) {
fs.mkdirSync(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) {
if (err) {
res.send(err);
return;
}
var extName = ''; //后缀名
switch (files.upload.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if (extName.length === 0) {
res.send({
code: 202,msg: '只<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>png和jpg格式<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>'
});
return;
} else {
var avatarName = '/' + Date.now() + '.' + extName;
var newPath = form.uploadDir + avatarName;
displayUrl = UPLOAD_FOLDER + currentUser.id + avatarName;
fs.renameSync(files.upload.path,newPath); //<a href="https://www.jb51.cc/tag/zhongmingming/" target="_blank" class="keywords">重命名</a>
res.send({
code: 200,msg: displayUrl
});
}});
};
不同用户上传置放在不同的位置，根据需求来设置，当然也有可以每张图片都给不同的id编号，推荐第三方uuid插件:https://github.com/broofa/node-uuid
node-formidable有很多官方API还有很多设置的选项，本文根据需求设置了几项，有额外需求的可以参考官方地址~
原文链接：https://www.f2er.com/express/38222.html