Node Js 实现图片上传学习笔记

最新推荐文章于 2024-03-20 11:31:22 发布

Qin_xian_shen

最新推荐文章于 2024-03-20 11:31:22 发布

阅读量7.5k

点赞数

分类专栏： nodeJS学习笔记文章标签： nodejs

nodeJS学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

安装 Express 命令行工具：sudo npm install -g express-generator
创建并初始化项目：express -ejs upload
安装依赖模块：cd upload && npm install
安装 bower 用于管理前端资源模块：sudo npm install -g bower
/upload/public 下执行命令：bower install bootstrap
启动项目：npm start

打开文件 /upload/views/index.ejs 并输入如下代码：

<!DOCTYPE html>
<html>
  <head>
      <title><%= title %></title>
      <meta charset="utf-8">
      <!-- 引入 bootstrap 及相关文件 -->
      <link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
      <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
      <script src="/bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
      <script src="/js/script.js"></script>
  </head>

  <body>
        <div id="container" class="container">
            <!-- 添加信息提示 -->
            <% if (locals.success) { %> 
                <div id="alt_sucess" class="alert alert-success"> 
                    <%- success %> 
                </div> 
            <% } %> 

            <% if (locals.error) { %> 
                <div id="alt_warning" class="alert alert-warning"> 
                    <%= error %> 
                </div> 
            <% } %> 

            <!-- 表单 -->
            <form class="form-signin" role="form" method="post" enctype='multipart/form-data'>
                <div class="form-group">
                    <lebal for="fulAvatar">上传文件</lebal>
                    <input type="file" id="fulAvatar" name="fulAvatar" accept="image/*"/>
                </div>
                <button id="btnSub" class="btn btn-lg btn-primary" type="submit">上 传</button>
            </form>
        </div>
    </body>
</html>

在提交表单时，一般需要前后端都各进行一次验证，以确保上传的安全性，所以新建 /upload/public/js/script.js 文件，敲入以下代码：

// 在 String 对象的 prototype 属性中添加我们自定义的 format() 方法
String.prototype.format = function (args) {
      var result = this;
      if (arguments.length > 0) {
        if (arguments.length == 1 && typeof (args) == "object") {
          for (var key in args) {
            if (args[key] != undefined) {
              var reg = new RegExp("({" + key + "})", "g");
              result = result.replace(reg, args[key]);
            }
          }
        }
        else {
          for (var i = 0; i < arguments.length; i++) {
            if (arguments[i] != undefined) {
              var reg = new RegExp("({)" + i + "(})", "g");
              result = result.replace(reg, arguments[i]);
            }
          }
        }
      }
      return result;
  }

$(function(){
    $('#btnSub').on('click',function(){           
        var fulAvatarVal = $('#fulAvatar').val(),  
        errorTip = '<div id="errorTip" class="alert alert-warning">{0}</div> ';

        $("#errorTip,#alt_warning").remove();

        if(fulAvatarVal.length == 0) {
            $("#container").prepend(errorTip.format('请选择要上传的文件'));                            
            return false;
        }

        // 验证上传文件后缀
        var extName = fulAvatarVal.substring(fulAvatarVal.lastIndexOf('.'),fulAvatarVal.length).toLowerCase();

        if(extName != '.png' && extName != '.jpg'){
            $("#container").prepend(errorTip.format('只支持png和jpg格式图片'));                             
            return false;                
        }

        return true;            
    })
});

前端上传验证实现后，我们需要编写后台程序，实现验证并上传图片

安装 node-formidable，执行命令：npm install formidable --save

在 /upload/public 下新建文件夹 avatar 用于保存上传的图片

修改 /upload/routes/index.js 为：

// 导入必备的模块，全局设置一些公共变量
var express = require('express'),
    router = express.Router(),    
    formidable = require('formidable'),
    fs = require('fs'),
    TITLE = '文件上传示例',
    AVATAR_UPLOAD_FOLDER = '/avatar/';

/* GET home page. */
router.get('/', function(req, res) {
    res.render('index', { title: TITLE });
});

router.post('/', function(req, res) {

    //创建上传表单
    var form = new formidable.IncomingForm();

    //设置编辑
    form.encoding = 'utf-8';

    //设置上传目录
    form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER;

    //保留后缀
    form.keepExtensions = true;

    //文件大小 2M
    form.maxFieldsSize = 2 * 1024 * 1024;

    // 上传文件的入口文件
    form.parse(req, function(err, fields, files) {

        if (err) {
            res.locals.error = err;
            res.render('index', { title: TITLE });
            return;
        }

        var extName = '';  //后缀名
        switch (files.fulAvatar.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.locals.error = '只支持png和jpg格式图片';
            res.render('index', { title: TITLE });
            return;                   
        }

        var avatarName = Math.random() + '.' + extName;
        var newPath = form.uploadDir + avatarName;
        fs.renameSync(files.fulAvatar.path, newPath);  //重命名
    });

    res.locals.success = '上传成功';
    res.render('index', { title: TITLE });
});

module.exports = router;

这样，简单的上传文件例子就完成了，执行 npm start 启动项目

上传的本地图片可以通过浏览器，浏览实验楼首页，下载一张课程图片即可。

选中并点击上传后，根据页面显示的提示信息即可判断是否上传成功。如果在 /upload/public/avatar

Qin_xian_shen

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Node Js 实现图片上传学习笔记

安装 Express 命令行工具：sudo npm install -g express-generator创建并初始化项目：express -ejs upload安装依赖模块：cd upload && npm install安装 bower 用于管理前端资源模块：sudo npm install -g bower/upload/public 下执行命令：bower install boots
复制链接

扫一扫