亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 編程 > JavaScript > 正文

輕松創建nodejs服務器(10):處理上傳圖片

2019-11-20 13:39:51
字體:
來源:轉載
供稿:網友

本節我們將實現,用戶上傳圖片,并將該圖片在瀏覽器中顯示出來。

這里我們要用到的外部模塊是Felix Geisendörfer開發的node-formidable模塊。它對解析上傳的文件數據做了很好的抽象。

要安裝這個外部模塊,需在cmd下執行命令:

復制代碼 代碼如下:

npm install formidable

如果輸出類似的信息就代表安裝成功了:
復制代碼 代碼如下:

npm info build Success: formidable@1.0.14

安裝成功后我們用request將其引入即可:
復制代碼 代碼如下:

var formidable = require(“formidable”);

這里該模塊做的就是將通過HTTP POST請求提交的表單,在Node.js中可以被解析。我們要做的就是創建一個新的IncomingForm,它是對提交表單的抽象表示,之后,就可以用它解析request對象,獲取表單中需要的數據字段。

本文案例的圖片文件存儲在 /tmp文件夾中。

我們先來解決一個問題:如何才能在瀏覽器中顯示保存在本地硬盤中的文件?

我們使用fs模塊來將文件讀取到服務器中。

我們來添加/showURL的請求處理程序,該處理程序直接硬編碼將文件/tmp/test.png內容展示到瀏覽器中。當然了,首先需要將該圖片保存到這個位置才行。

我們隊requestHandlers.js進行一些修改:

復制代碼 代碼如下:

var querystring = require("querystring"),
 fs = require("fs");
function start(response, postData) {
 console.log("Request handler 'start' was called.");
 var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" '+
    'content="text/html; charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" method="post">'+
    '<textarea name="text" rows="20" cols="60"></textarea>'+
    '<input type="submit" value="Submit text" />'+
    '</form>'+
    '</body>'+
    '</html>';
 response.writeHead(200, {"Content-Type": "text/html"});
 response.write(body);
 response.end();
}
function upload(response, postData) {
 console.log("Request handler 'upload' was called.");
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.write("You've sent the text: "+ querystring.parse(postData).text);
 response.end();
}
function show(response, postData) {
 console.log("Request handler 'show' was called.");
 fs.readFile("/tmp/test.png", "binary", function(error, file) {
  if(error) {
   response.writeHead(500, {"Content-Type": "text/plain"});
   response.write(error + "/n");
   response.end();
  } else {
   response.writeHead(200, {"Content-Type": "image/png"});
   response.write(file, "binary");
   response.end();
  }
 });
}
exports.start = start;
exports.upload = upload;
exports.show = show;

我們還需要將這新的請求處理程序,添加到index.js中的路由映射表中:

復制代碼 代碼如下:

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");
var handle = {}
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;
handle["/show"] = requestHandlers.show;
server.start(router.route, handle);

重啟服務器之后,通過訪問http://localhost:8888/show,就可以看到保存在/tmp/test.png的圖片了。

好,最后我們要的就是:

 在/start表單中添加一個文件上傳元素

 將node-formidable整合到我們的upload請求處理程序中,用于將上傳的圖片保存到/tmp/test.png

 將上傳的圖片內嵌到/uploadURL輸出的HTML中

第一項很簡單。只需要在HTML表單中,添加一個multipart/form-data的編碼類型,移除此前的文本區,添加一個文件上傳組件,并將提交按鈕的文案改為“Upload file”即可。 如下requestHandler.js所示:

復制代碼 代碼如下:

var querystring = require("querystring"),
 fs = require("fs");
function start(response, postData) {
 console.log("Request handler 'start' was called.");
 var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" '+
    'content="text/html; charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" enctype="multipart/form-data" '+
    'method="post">'+
    '<input type="file" name="upload">'+
    '<input type="submit" value="Upload file" />'+
    '</form>'+
    '</body>'+
    '</html>';
 response.writeHead(200, {"Content-Type": "text/html"});
 response.write(body);
 response.end();
}
function upload(response, postData) {
 console.log("Request handler 'upload' was called.");
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.write("You've sent the text: "+ querystring.parse(postData).text);
 response.end();
}
function show(response, postData) {
 console.log("Request handler 'show' was called.");
 fs.readFile("/tmp/test.png", "binary", function(error, file) {
  if(error) {
   response.writeHead(500, {"Content-Type": "text/plain"});
   response.write(error + "/n");
   response.end();
  } else {
   response.writeHead(200, {"Content-Type": "image/png"});
   response.write(file, "binary");
   response.end();
  }
 });
}
exports.start = start;
exports.upload = upload;
exports.show = show;

接下來,我們要完成第二步,我們從server.js開始 ―― 移除對postData的處理以及request.setEncoding (這部分node-formidable自身會處理),轉而采用將request對象傳遞給請求路由的方式:

復制代碼 代碼如下:

var http = require("http");
var url = require("url");
function start(route, handle) {
 function onRequest(request, response) {
  var pathname = url.parse(request.url).pathname;
  console.log("Request for " + pathname + " received.");
  route(handle, pathname, response, request);
 }
 http.createServer(onRequest).listen(8888);
 console.log("Server has started.");
}
exports.start = start;

接下來修改router.js,這次要傳遞request對象:

復制代碼 代碼如下:

function route(handle, pathname, response, request) {
 console.log("About to route a request for " + pathname);
 if (typeof handle[pathname] === 'function') {
  handle[pathname](response, request);
 } else {
  console.log("No request handler found for " + pathname);
  response.writeHead(404, {"Content-Type": "text/html"});
  response.write("404 Not found");
  response.end();
 }
}
exports.route = route;

現在,request對象就可以在我們的upload請求處理程序中使用了。node-formidable會處理將上傳的文件保存到本地/tmp目錄中,而我們需

要做的是確保該文件保存成/tmp/test.png。

接下來,我們把處理文件上傳以及重命名的操作放到一起,如下requestHandlers.js所示:

復制代碼 代碼如下:

var querystring = require("querystring"),
 fs = require("fs"),
 formidable = require("formidable");
function start(response) {
 console.log("Request handler 'start' was called.");
 var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" content="text/html; '+
    'charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" enctype="multipart/form-data" '+
    'method="post">'+
    '<input type="file" name="upload" multiple="multiple">'+
    '<input type="submit" value="Upload file" />'+
    '</form>'+
    '</body>'+
    '</html>';
 response.writeHead(200, {"Content-Type": "text/html"});
 response.write(body);
 response.end();
}
function upload(response, request) {
 console.log("Request handler 'upload' was called.");
 var form = new formidable.IncomingForm();
 console.log("about to parse");
 form.parse(request, function(error, fields, files) {
  console.log("parsing done");
  fs.renameSync(files.upload.path, "/tmp/test.png");
  response.writeHead(200, {"Content-Type": "text/html"});
  response.write("received image:<br/>");
  response.write("<img src='/show' />");
  response.end();
 });
}
function show(response) {
 console.log("Request handler 'show' was called.");
 fs.readFile("/tmp/test.png", "binary", function(error, file) {
  if(error) {
   response.writeHead(500, {"Content-Type": "text/plain"});
   response.write(error + "/n");
   response.end();
  } else {
   response.writeHead(200, {"Content-Type": "image/png"});
   response.write(file, "binary");
   response.end();
  }
 });
}
exports.start = start;
exports.upload = upload;
exports.show = show;

做到這里,我們的服務器就全部完成了。

在執行圖片上傳的過程中,有的人可能會遇到這樣的問題:

照成這個問題的原因我猜測是由于磁盤分區導致的,要解決這個問題就需要改變formidable的默認零時文件夾路徑,保證和目標目錄處于同一個磁盤分區。

我們找到requestHandlers.js的 upload函數,將它做一些修改:

復制代碼 代碼如下:

function upload(response, request) {
 console.log("Request handler 'upload' was called.");
 var form = new formidable.IncomingForm();
 console.log("about to parse");
 
 form.uploadDir = "tmp";
 
 form.parse(request, function(error, fields, files) {
  console.log("parsing done");
  fs.renameSync(files.upload.path, "/tmp/test.png");
  response.writeHead(200, {"Content-Type": "text/html"});
  response.write("received image:<br/>");
  response.write("<img src='/show' />");
  response.end();
 });
}

我們增加了一句 form.uploadDir = “tmp”,現在重啟服務器,再執行上傳操作,問題完美解決。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
国产视频亚洲精品| 日韩av电影在线网| 国产一区二区三区在线观看视频| 韩剧1988在线观看免费完整版| 欧美极品少妇xxxxⅹ喷水| 日韩在线观看免费网站| 92国产精品视频| 日韩资源在线观看| 91av视频在线观看| 国产亚洲精品日韩| 97国产成人精品视频| 国产成人综合亚洲| 中文字幕精品www乱入免费视频| 在线视频欧美日韩精品| 欧美肥臀大乳一区二区免费视频| 亚洲va久久久噜噜噜| 欧美久久久精品| 国产精品高潮呻吟久久av野狼| 亚洲永久免费观看| 九九热视频这里只有精品| 亚洲国产中文字幕久久网| 亚洲欧美国产另类| 九九热精品视频| 欧美大全免费观看电视剧大泉洋| 国产精品18久久久久久麻辣| 中文字幕欧美日韩va免费视频| 日韩欧美第一页| 亚洲毛片在线观看.| 国产成+人+综合+亚洲欧洲| 成人精品一区二区三区电影免费| 国产精品久久久精品| 亚洲国内高清视频| 国产成人精品优优av| 亚洲一区亚洲二区亚洲三区| 欧美日韩国产丝袜美女| 国产在线观看一区二区三区| 亚洲午夜色婷婷在线| 久久黄色av网站| 97人洗澡人人免费公开视频碰碰碰| 亚洲xxxxx| 日韩美女免费线视频| 国产欧美精品在线| www.亚洲一区| 国产精品极品尤物在线观看| 亚洲一区二区精品| 国产精品久久久久久久久久久不卡| 91牛牛免费视频| 国产精品观看在线亚洲人成网| 国产亚洲福利一区| 菠萝蜜影院一区二区免费| 538国产精品视频一区二区| 国产一区二区三区免费视频| 国产精品户外野外| 日本韩国在线不卡| 国产欧美久久一区二区| 欧美福利视频网站| 九九热这里只有在线精品视| 欧美精品激情blacked18| 久久久久999| 亚洲第一天堂无码专区| 精品久久久香蕉免费精品视频| 国产精品扒开腿做爽爽爽的视频| 在线视频欧美日韩精品| 最近2019免费中文字幕视频三| 色婷婷综合久久久久| 夜夜嗨av色一区二区不卡| 日韩精品小视频| 在线观看国产精品日韩av| 九九精品在线视频| 亚洲成人xxx| 久久精品视频在线观看| 日本精品久久中文字幕佐佐木| 中文字幕欧美精品日韩中文字幕| 精品国产91久久久久久| 精品国产一区二区三区在线观看| 日韩av中文字幕在线免费观看| 亚洲人成网7777777国产| 国产91露脸中文字幕在线| 成人免费大片黄在线播放| 在线日韩欧美视频| 中文字幕日韩欧美在线视频| 久久久精品2019中文字幕神马| 中文字幕国产亚洲| 欧美在线视频在线播放完整版免费观看| 亚洲精品免费网站| 91久久精品美女| 欧美在线视频a| 久久精品国产成人精品| 亚洲片国产一区一级在线观看| 欧美在线视频在线播放完整版免费观看| 久久久久久久久国产| 精品久久中文字幕久久av| 久久综合电影一区| 亚洲美女av网站| 欧美午夜丰满在线18影院| www.xxxx欧美| 国产91精品久久久| 欧美性猛交xxxx富婆弯腰| 国产在线一区二区三区| 国产精品视频精品| 黑人巨大精品欧美一区二区三区| 免费成人高清视频| 欧美做受高潮1| 欧美电影免费观看| 久久久久久欧美| 在线日韩av观看| 91九色国产视频| 国产亚洲精品美女| 亚洲精品国产综合久久| 色悠久久久久综合先锋影音下载| 欧美激情亚洲激情| 永久免费毛片在线播放不卡| 国产免费成人av| 久久久久久久久久久网站| 亚洲国产日韩欧美在线图片| 欧美裸体xxxx极品少妇| 亚洲成人网在线观看| 国产欧美日韩免费| 91国自产精品中文字幕亚洲| 日韩动漫免费观看电视剧高清| 91香蕉嫩草神马影院在线观看| 深夜福利日韩在线看| 久久精品国产2020观看福利| 亚洲一级片在线看| 亚洲免费av网址| 亚洲人成在线播放| 久久国产精品久久久| 欧美又大又粗又长| 91探花福利精品国产自产在线| 日本成人精品在线| 成人疯狂猛交xxx| 国产一区二区三区中文| 视频在线观看一区二区| 久久久久久有精品国产| 国产精品久久久久久久久免费看| 97免费视频在线| 日本国产一区二区三区| 亚洲色图50p| 亚洲国产99精品国自产| 国产a∨精品一区二区三区不卡| 亚洲天堂成人在线| 欧美在线视频导航| 深夜福利国产精品| 日韩欧美中文在线| 欧美日韩精品在线播放| 国产精品稀缺呦系列在线| 日韩亚洲欧美中文在线| 爱福利视频一区| 一区二区三区回区在观看免费视频| 亚洲精品福利资源站| 欧美激情精品久久久久久久变态| 精品毛片三在线观看| 亚洲成色www8888| 亚洲已满18点击进入在线看片| 综合久久五月天| 亚洲欧美一区二区三区情侣bbw| 欧美超级乱淫片喷水| 国产精品视频在线观看| 日日骚av一区| 久久久久久综合网天天| 国产精品久久久久久久久免费| 欧美视频专区一二在线观看| 亚洲第一区中文字幕| 97人人爽人人喊人人模波多|