• nodejs----上传显示图片


    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.图片被保存在路径:

      

     

  • 相关阅读:
    CMDB服务器管理系统【s5day92】:服务器管理回顾
    主机管理+堡垒机系统开发:需求讨论(一)
    saltstack主机管理项目:今日总结(六)
    saltstack主机管理项目:动态调用插件解析-模块解析(五)
    saltstack主机管理项目:编写插件基类-获取主机列表-提取yaml配置文件(四)
    saltstack主机管理项目:计主机管理项目命令分发器(三)
    saltstack主机管理项目:主机管理项目需求分析(一)
    saltstack主机管理项目:主机管理项目架构设计(二)
    CMDB服务器管理系统【s5day89】:采集资产之整合资产
    CMDB服务器管理系统【s5day89】:采集资产之汇报信息
  • 原文地址:https://www.cnblogs.com/IanI/p/3992520.html
Copyright © 2020-2023  润新知