轻松创建轻松创建nodejs服务器(服务器(10):处理上传图片):处理上传图片
本节我们将实现,用户上传图片,并将该图片在浏览器中显示出来。
这里我们要用到的外部模块是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 + “”);
response.end();
} else {
response.writeHead(200, {“Content-Type”: “image/png”});
response.write(file, “binary”);
response.end();
}
});