如果使用node+express作为后端的话,肯定是避免不了上传的,因此我们需要使用node+express来对图片或者其他文件进行上传。如果你不使用express也是可以的。这里我们需要使用到一个node插件formidable,这个插件主要提供的就是上传功能。下面开始我们的项目吧。
首先你得搭建node+express环境,如果不知道怎么搭建的,请看我之前写的一篇文章《node+express+mongodb注册登录实例》,文章前半部分有关于环境搭建的说明。搭建完成后,我们需要安装formidable插件,在node中插件安装的方法就是直接使用命令,在项目当前目录下,直接执行npm install xxxx –save(xxxx是插件名称,–save则是将插件写入packge.json文件中)即可安装插件,如此安装formidable就使用以下命令即可:
npm install formidable –sava
也可以使用简写的命令
npm i -S formidable //(i即install,-S,这里的s是大写的,即sava)
安装完成之后,我们首先直接在index.ejs或者index.jade中添加一个表单form,内容如下:
下面该是写上传功能的router了,通过express的router的post来实现上传,我们打开routers目录下的index.js添加下面的代码:
//在顶部代码中加入如下代码
var formidable = require('formidable');
var fs = require('fs');
//在module.exports = router;之前添加下面的代码
//上传图片
router.post('/upload', function(req, res, next){
var AVATAR_UPLOAD_FOLDER = '/avatar/' //首先必须在public目录下创建一个名字为avatar的文件夹,否则上传会报错,因为此程序无法自动创建目录
var form = new formidable.IncomingForm(); //创建上传表单
form.encoding = 'utf-8'; //设置编辑
form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER; //设置上传目录
form.keepExtensions = true; //保留后缀
form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.parse(req, function(err, fields, files) {
if (err) {
//res.locals.error = err;
res.json({'avatar':'error'}); //发生错误后输出json内容为avatar:error
return;
}
//设置允许上传的文件,这里我设置的是图片,你也可以直接设置成rar、zip、doc等
var extName = ''; //后缀名
switch (files.avatar.type) { //这里的avatar就是我们之前表单中input[type=file]的name值,别搞错了
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;
}
//如果没有查找到.jpg、.png的后缀名,则提示错误信息
if(extName.length == 0){
//res.locals.error = '只支持png和jpg格式图片';
res.json({'avatar':'不支持的类型'});
return;
}
//重新修改文件名字,使用随机数作为图片名字
var avatarName = Math.random() + '.' + extName;
var newPath = form.uploadDir + avatarName;
//得到上传后的图片相对路径
console.log(newPath);
fs.renameSync(files.fulAvatar.path, newPath); //重命名
//返回json,json内容为图片相对路径
//res.locals.success = '上传成功';
res.json({'avatar':newPath});
});
});
代码完成了,赶快输入http://localhost:3000查看效果吧,看看上传是否已经成功了。
另外如果想要了解formidable的api的童鞋,请直接移步到npm:https://www.npmjs.com/package/formidable