欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(kù)（mysql）傻瓜式教程（一）

 更新時(shí)間：2015年12月10日 16:27:28   作者：孟星魂  
這篇文章主要介紹了Express實(shí)現(xiàn)前端后端通信上傳圖片存儲(chǔ)數(shù)據(jù)庫(kù)（mysql）傻瓜式教程（一）,需要的朋友可以參考下

在前端這個(gè)坑里摸爬滾打已經(jīng)一年多了，終于下定決心寫下自己第一篇博客（雖然內(nèi)容原創(chuàng)居少，算是個(gè)整合內(nèi)容），開始使用express的原因是因?yàn)樽约合霚y(cè)試接收下前端上傳圖片并返回，實(shí)現(xiàn)圖片上傳。后端各位大大們又都比較忙，沒辦法了，只能自己上了（哎，都是逼出來(lái)的）。

　　此教程適合沒有接觸過(guò)node的web前端開發(fā)，快速構(gòu)建自己的框架，基于express4.x。

　　首先安裝express ，http://www.expressjs.com.cn/starter/installing.html，安裝過(guò)程中一直回車到底就ok了。

　　安裝完成后，繼續(xù)安裝express的應(yīng)用骨架，生成默認(rèn)項(xiàng)目

$ npm install express-generator -g

　?。?g表示全局安裝，下次可以直接使用，不用再次安裝）

　　接著在myapp文件夾下直接運(yùn)行express，項(xiàng)目目錄就直接生成了　

 　 　然后安裝所有依賴包：

$ npm install

　　啟動(dòng)這個(gè)應(yīng)用（MacOS 或 Linux 平臺(tái)）：

$ DEBUG=myapp npm start

　　Windows 平臺(tái)使用如下命令：

> set DEBUG=myapp & npm start

　　　看到這個(gè)頁(yè)面時(shí)，大家已經(jīng)完成了基礎(chǔ)的項(xiàng)目構(gòu)建，繼續(xù)往上添加自己的代碼就可以了。（到這部后大家可以把public目錄下的文件夾修改為自己喜歡的格式，例如：js，css，只是一個(gè)路徑而已）

　　　接下來(lái)大家就可以把自己的頁(yè)面添加到項(xiàng)目里面了，不過(guò)express到目前我只發(fā)現(xiàn)可以加載jade模板和ejs。大家不用擔(dān)心還要從新學(xué)習(xí)jade，這里http://www.html2jade.org/，可以直接用工具把html轉(zhuǎn)化為jade模板，可以讓你手中已有的項(xiàng)目直接添加進(jìn)去，jade模板在express的加載方法：http://www.expressjs.com.cn/guide/using-template-engines.html。其實(shí)jade的寫法真的很簡(jiǎn)單，大家看一下api基本就能上手了，學(xué)習(xí)地址點(diǎn)這里。（項(xiàng)目里已經(jīng)集成了jade，不用重復(fù)安裝）

 　　　現(xiàn)在大家打開核心的app.js

這幾行定義的是express的路由，大家可以簡(jiǎn)單了解下路由的作用，http://www.expressjs.com.cn/guide/routing.html，這點(diǎn)非常重要，一定要理解，不是很難，應(yīng)該能夠很快理解。

　　　比如現(xiàn)在你打開http://localhost:3000/users頁(yè)面，對(duì)應(yīng)user.js里面的代碼一看就能理解。(打開這個(gè)頁(yè)面時(shí)發(fā)生了get請(qǐng)求)

　　　下面咱們先不急著上傳圖片，先測(cè)試下前端發(fā)送的post和get請(qǐng)求。 

　　　以post請(qǐng)求為例，咱們把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下新建個(gè)index.js，加載jquery（只是為了簡(jiǎn)寫的ajax）有人可能會(huì)問(wèn)為什么會(huì)沒有public路徑，因?yàn)镋xpress 內(nèi)置的 express.static 可以方便地托管靜態(tài)文件，例如圖片、CSS、JavaScript 文件等，詳細(xì)內(nèi)容點(diǎn)這里,對(duì)應(yīng)app.js的內(nèi)容為 app.use(express.static(path.join(__dirname, 'public')));

只有這樣才能讀取到文件。

　　下面開始修改js代碼，public/js/index.js內(nèi)寫個(gè)最基礎(chǔ)的ajax請(qǐng)求就好了，這里發(fā)送請(qǐng)求的路徑為"/"，就是往主頁(yè)發(fā)送請(qǐng)求（路由一定要理解，路由一定要理解，路由一定要理解?。。?br /> 

$(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. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
});
router.post('/', function(req, res) { 
 res.send(req.body.num);
});
module.exports = router;

　　在此監(jiān)聽首頁(yè)的post請(qǐng)求，req.body.num表示發(fā)送過(guò)來(lái)的數(shù)據(jù)，大家可以直接打印下req，看看里面包含了什么內(nèi)容，加深理解（修改完文件后記得重啟express）。

　　這時(shí)候在控制臺(tái)中就可以看到返回的數(shù)據(jù)了。

　　現(xiàn)在大家已經(jīng)可以使用node接收前端發(fā)送的請(qǐng)求了（是不是灰長(zhǎng)開心?。。?，下面進(jìn)行我們的重頭戲，上傳圖片。

　　因?yàn)槭菧y(cè)試接口，公司的項(xiàng)目要兼容低版本瀏覽器，所有plupload.js就上場(chǎng)了(不是我不想用h5的方法)。官網(wǎng)，下載后如圖，就夠用了。（記得在layout.jade里面加載）

　　把index.js修改成下面的樣子,這是個(gè)標(biāo)準(zhǔn)的官網(wǎng)上傳事例，不理解的在官網(wǎng)看下api，很好理解（其實(shí)看變量名字也都能理解~）

$(document).ready(function() {
 var uploader = new plupload.Uploader({
 runtimes: 'html5,flash,silverlight,html4',
 browse_button: 'pickfiles', // you can pass an id...
 container: document.getElementById('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() {
 document.getElementById('filelist').innerHTML = '';
 document.getElementById('uploadfiles').onclick = function() {
 uploader.start();
 return false;
 };
 },
 FilesAdded: function(up, files) {
 plupload.each(files, function(file) {
 document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
 });
 },
 UploadProgress: function(up, file) {
 document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
 },
 Error: function(up, err) {
 document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
 },
 FileUploaded: function(up, file, info) { // Called when file has finished uploading 
 $("body").append($(info.response)) 
 },
 UploadComplete: function(up, file) {
 }
 }
 });
 uploader.init();
})

　　index.jade修改成下面的樣子，主要是添加上傳點(diǎn)擊的元素，添加了兩個(gè)按鈕而已（不要嫌棄它確實(shí)是比較丑--）

extends layout
block content
 h1= title
 p Welcome to #{title}
 #filelist
 #container
 a#pickfiles select files
 a#uploadfiles upload files

　　這里我們要用到的外部模塊是Felix Geisendörfer開發(fā)的node-formidable模塊。它對(duì)解析上傳的文件數(shù)據(jù)做了很好的抽象。 其實(shí)說(shuō)白了，處理文件上傳“就是”處理POST數(shù)據(jù) —— 但是，麻煩的是在具體的處理細(xì)節(jié)，所以，這里采用現(xiàn)成的方案更合適點(diǎn)?！　?br />

　　安裝formidable模塊。

npm install formidable

　　修改routes/index.js

var express = require('express');
var router = express.Router();
var fs = require('fs');
var formidable = require("formidable");
/* GET home page. */
router.get('/', function(req, res) {
 res.render('index', {
 title: '孟星魂'
 });
});
router.post('/', function(req, res) {
 var form = new formidable.IncomingForm();
 form.uploadDir = "./public/upload/temp/"; //改變臨時(shí)目錄
 form.parse(req, function(error, fields, files) {
 for (var key in files) {
 var file = files[key];
 var fName = (new Date()).getTime();
 switch (file.type) {
 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;
 fs.rename(file.path, uploadDir, function(err) {
 if (err) {
 res.write(err + "\n");
 res.end();
 }
 //res.write("upload image:<br/>");
 res.write("<img src='/upload/" + fName + "' />");
 res.end();
 })
 }
 });
});

module.exports = router;

 　　此時(shí)需要在public下手動(dòng)新建文件夾upload以及下面的temp文件夾。

 　　先把文件上傳到臨時(shí)文件夾，再通過(guò)fs重命名移動(dòng)到指定的目錄即可。

　　fs.rename即重命名，但是fs.rename不能夸磁盤移動(dòng)文件，所以我們需要指定上傳的臨時(shí)目錄要和最終目錄在同一磁盤下。

　　res.write就是往前端返回的數(shù)據(jù)，這里我直接返回一個(gè)img標(biāo)簽，并添加上傳文件的路徑，前端只要把標(biāo)簽append到頁(yè)面中就ok了。

　　完成前端圖片上傳功能?。?br />

　　今天進(jìn)行到這里，明天進(jìn)行講解node連接數(shù)據(jù)庫(kù)的操作。

相關(guān)文章

最新評(píng)論