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 bootstrap- 启动项目：
npm start
打开文件 /upload/views/index.ejs 并输入如下代码：
<html>
<head>
<title><%= title %>title>
<meta charset="utf-8">
<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 = '{0} ';
$("#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