node+express图片上传实例

如果使用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,内容如下:

<form action="/upload" method="post" enctype='multipart/form-data'>
    <input name="avatar" type="file" />
    <button type="submit">上 传</button>
  </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

发表评论

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