Express实现前端后端通信上传图⽚之存储数据库
（mysql）傻⽠式教程（⼀）
在前端这个坑⾥摸爬滚打已经⼀年多了，终于下定决⼼写下⾃⼰第⼀篇博客（虽然内容原创居少，算是个整合内容），开始使⽤express的原因是因为⾃⼰想测试接收下前端上传图⽚并返回，实现图⽚上传。后端各位⼤⼤们⼜都⽐较忙，没办法了，只能⾃⼰上了（哎，都是逼出来的）。
此教程适合没有接触过node的web前端开发，快速构建⾃⼰的框架，基于express4.x。
安装完成后，继续安装express的应⽤⾻架，⽣成默认项⽬
$ npm install express-generator -g
（-g表⽰全局安装，下次可以直接使⽤，不⽤再次安装）
接着在myapp⽂件夹下直接运⾏express，项⽬⽬录就直接⽣成了
然后安装所有依赖包：
$ npm install
启动这个应⽤（MacOS 或 Linux 平台）：
$ DEBUG=myapp npm start
Windows 平台使⽤如下命令：
> set DEBUG=myapp & npm start
看到这个页⾯时，⼤家已经完成了基础的项⽬构建，继续往上添加⾃⼰的代码就可以了。（到这部后⼤家可以把public ⽬录下的⽂件夹修改为⾃⼰喜欢的格式，例如：js，css，只是⼀个路径⽽已）
现在⼤家打开核⼼的app.js
下⾯咱们先不急着上传图⽚，先测试下前端发送的post和get请求。
以post请求为例，咱们把layout.jade修改成下⾯的样⼦
doctype html
html
head
title= title
link(rel='stylesheet', href='/css/style.css')
script(type="text/javascript", src="/js/jquery.js")
script(type="text/javascript", src="/js/index.js")
body
block content
在public/js下新建个index.js，加载jquery（只是为了简写的ajax）有⼈可能会问为什么会没有public路径，因为Express 内置的 express.static 可以⽅便地托管静态⽂件，例如图⽚、CSS、JavaScript ⽂件等，详细内容点这⾥，对应app.js的内容为app.use(express.static(path.join(__dirname, 'public')));
只有这样才能读取到⽂件。
下⾯开始修改js代码，public/js/index.js内写个最基础的ajax请求就好了，这⾥发送请求的路径为"/"，就是往主页发送请求（路由⼀定要理解，路由⼀定要理解，路由⼀定要理解！！）
$(document).ready(function()
{
$.post('/',
{num: '12345678'
},
function(data)
{
console.log(data)
});
})
然后在routes/index.js⾥⾯修改
var express = require('express');
var router = express.Router();
/* GET home page. */
<('/', function(req, res, next) {
router.post('/', function(req, res) {
res.send(req.body.num);
});
在此监听⾸页的post请求，req.body.num表⽰发送过来的数据，⼤家可以直接打印下req，看看⾥⾯包含了什么内容，加深理解（修改完⽂件后记得重启express）。
这时候在控制台中就可以看到返回的数据了。
现在⼤家已经可以使⽤node接收前端发送的请求了（是不是灰长开⼼！！），下⾯进⾏我们的重头戏，上传图⽚。
因为是测试接⼝，公司的项⽬要兼容低版本浏览器，所有plupload.js就上场了(不是我不想⽤h5的⽅法)。官⽹，下载后如图，就够⽤了。（记得在layout.jade⾥⾯加载）
把index.js修改成下⾯的样⼦，这是个标准的官⽹上传事例，不理解的在官⽹看下api，很好理解（其实看变量名字也都能理解~）
$(document).ready(function() {
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'pickfiles', // you can pass
container: ElementById('container'), // ... or DOM Element itself
url: '/',
flash_swf_url: '../js/Moxie.swf',
silverlight_xap_url: '../js/Moxie.xap',
filters: {
max_file_size: '10mb',
mime_types: [{
title: "Image files",
extensions: "jpg,gif,png"
}, {
title: "Zip files",
extensions: "zip"
}]
},
init: {
PostInit: function() {
uploader.start();
return false;
};
},
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
},
UploadProgress: function(up, file) {
},
Error: function(up, err) {
},
FileUploaded: function(up, file, info) { // Called when file has finished uploading
$("body").append($(sponse))
},
UploadComplete: function(up, file) {
}
});
uploader.init();
})
index.jade修改成下⾯的样⼦，主要是添加上传点击的元素，添加了两个按钮⽽已（不要嫌弃它确实是⽐较丑--）
extends layout
block content
h1= title
p Welcome to #{title}
#filelist
#container
a#pickfiles select files
a#uploadfiles upload files
这⾥我们要⽤到的外部模块是Felix Geisendörfer开发的node-formidable模块。它对解析上传的⽂件数据做了很好的抽象。其实说⽩了，处理⽂件上传“就是”处理POST数据 —— 但是，⿇烦的是在具体的处理细节，所以，这⾥采⽤现成的⽅案更合适点。
安装formidable模块。
npm install formidable
javascript下载教程 修改routes/index.js
var express = require('express');
var router = express.Router();
var fs = require('fs');
var formidable = require("formidable");
/* GET home page. */
<('/', function(req, res) {
title: '孟星魂'
});
});
router.post('/', function(req, res) {
var form = new formidable.IncomingForm();
form.uploadDir = "./public/upload/temp/"; //改变临时⽬录
form.parse(req, function(error, fields, files) {
for (var key in files) {
var file = files[key];
var fName = (new Date()).getTime();
switch (pe) {
case "image/jpeg":
fName = fName + ".jpg";
break;
case "image/png":
fName = fName + ".png";
break;
default:
fName = fName + ".png";
break;
}
console.log(file, file.size);
var uploadDir = "./public/upload/" + fName;
if (err) {
res.write(err + "\n");
}
//res.write("upload image:<br/>");
res.write("<img src='/upload/" + fName + "' />");
})
}
});
});
此时需要在public下⼿动新建⽂件夹upload以及下⾯的temp⽂件夹。
先把⽂件上传到临时⽂件夹，再通过fs重命名移动到指定的⽬录即可。
fs.rename即重命名，但是fs.rename不能夸磁盘移动⽂件，所以我们需要指定上传的临时⽬录要和最终⽬录在同⼀磁盘下。
res.write就是往前端返回的数据，这⾥我直接返回⼀个img标签，并添加上传⽂件的路径，前端只要把标签append到页⾯中就ok了。
完成前端图⽚上传功能！！
今天进⾏到这⾥，明天进⾏讲解node连接数据库的操作。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论