Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

node+express图片上传实例

Posted on 2017年4月22日 by king2088

如果使用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

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme