Node.js实现图片的上传和显示,需要用到外部模块,formidable,这个模块是对解释上传的文件数据很好的抽象。文件上传,就是”处理“POST数据。
1,安装模块,打开nodejs安装目录,在命令行输入指令:
npm install formidable
2.引用formidable的模块,使用require指令。这个模块就是将通过http post请求提交的表单,在Node.js中可以被解释。
var formidable = require("formidable");
3.需要建立一个新的IncomingForm,对提交的表单的抽象表示,就可以用它解析request对象表单中需要的字。
var form = new formidable.IncomingForm();
4.实现图片的上传和显示这个引用因为要引用到formidable,必须把项目放在nodejs的安装目录下。
5.程序:
-----requestHandlers.js
-----server.js
-----router.js
-----index.js
requestHandlers.js
/*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"); /*formidable外部模块,解析上传的文件数据做了很好的抽象*/ var form = new formidable.IncomingForm(); //在应用目录下创建文件夹tmp,设置为上传路径 form.uploadDir = "tmp" console.log("About to parse"); form.parse(request,function(error,fields, files){ console.log("parsing done"); console.log(files.upload.path); //renameSync(oldpath,newpath) //同步操作,需要try catch try{ fs.renameSync(files.upload.path,"./tmp/test.png"); }catch(e){ console.log(e); } response.writeHead(200,{"Content-Type":"text/html"}); response.write("received image:<br/>"); //返回/show处理程序显示图片 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;
router.js
/*router.js*/ /*通过检查给定的路径对应的请求处理程序是否存在,如果存在的话直接调用相应的函数*/ 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;
server.js
/*server.js 处理请求模块*/ 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(3000); console.log("Server has started"); } exports.start = start;
index.js
/*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);
6.启动应用:
node index.js
7.打开URL
http://127.0.0.1:3000
8.上传图片后:
9.图片被保存在路径:
时间: 2024-10-17 14:26:44