nodeJs学习过程之一个图片上传显示的例子
目标
1. 在浏览器地址栏输入“http://demos/start”,进入欢迎页面,页面有一个文件上传表单;
2. 选择一张图片并提交表单,文件被上传到"http://demos/uploads"上传完成把该图片显示在页面上。
功能模块分解
1. 需要提供欢迎页,所以需要一个http服务器;
2. 对于不同请求,根据url,服务器能给与不同响应,需要路由,把请求对应到相应的请求处理程序(request handler)
3. 需要请求处理程序;
4. 路由处理post数据,并把数据封装成更加友好的格式传递给处理程序,需要数据处理功能;
5. 需要视图逻辑供请求处理程序使用,以便将结果返回给浏览器;
6. 需要上传处理功能处理上传细节。
如果是php实现,我们需要apache http服务器并配置mod_php5模块,那么整个“接收请求并回复“并不需要php来做。而使用nodejs,不仅仅是实现应用,同时还实现了http服务器。
一个基础的http服务器
nodejs支持模块化,有利于编写干净的代码。除了内置的模块,我们可以将自己的不同功能的代码放进不同模块中,说白了就是写在不同文件中。
创建js文件取名server.js,写入代码如下:
1 var http = require('http'); 2 3 http.createServer(function(req,res){ 4 res.writeHead(200,{'Content-Type':'text/html'}); 5 res.write('<h1>Node.js</h1>'); 6 res.end(""); 7 }).listen(3000,'127.0.0.1');
node server.js
浏览器输入"http://localhost:3000",显示”Node.js“。
服务器简单分析
第一行,require请求nodejs内置的http模块,赋给http变量;接着调用http模块的createServer方法,返回一个对象,这个对象有一个叫做listen的方法,这个方法的参数指定http服务器监听的端口号。createServer方法的匿名函数是该方法仅仅需要的一个参数,js中函数和变量一样可以传递。
使用这种方式是因为nodejs是事件驱动的。
当我们使用php时,任何时候每当有请求进入,apache就为这一新请求新建一个进程,并从头到尾的执行php脚本。htpp.createServer不仅仅是建一个侦听某端口的服务器,我们还想要他在收到http请求时做点什么。而nodejs是异步的:请求任何时候都可能到达,但是他却跑在一个单进程中。
当一个请求到达3000端口时怎么控制流程呢?这时候nodejs/javascript的事件驱动机制派上用场了。
我们向创建服务器的方法传递了一个函数,任何时候服务器收到请求,这个函数就会被调用,被用作处理请求的的地方。
服务器如何处理请求
当服务器加收请求回调的匿名函数被触发的时候,有两参数传入:request和response。利用这两个对象的方法处理请求的细节,并返回应答。
使用response.writeHead()发送一个http状态200和http头的内容类型等,使用response.write()在响应主体中发送文本,而使用response.end()完成应答。
封装为模块:
1 var http = require('http'); 2 3 function serverStart(){ 4 http.createServer(function(req,res){ 5 console.log('http request recieve'); 6 7 res.writeHead(200,{'Content-Type':'text/html'}); 8 res.write('<h1>Node.js</h1>'); 9 res.end(""); 10 }).listen(3000,'127.0.0.1'); 11 12 console.log('http server start on port 3000'); 13 } 14 15 exports.serverStart = serverStart;
第一行http是内置的模块,这里封装了我们自己的模块,通过关键字exports露出接口方法,模块名为该文件名server,之后”server模块“可以被其他模块引用。
创建index.js文件,写入代码并引用server模块:
1 var server = require("./server"); 2 3 server.serverStart();
对请求进行路由选择
为路由提供请求的url和其他GET和POST参数,路由根据这些数据来分发请求到具体的处理程序。因此,我们需要查看并解析http请求,提取出url和get/post参数,暂且将这一解析功能归于http服务器一部分。请求数据都包含在request对象中,引入内置模块url和querystring来解析它。
1 var http = require('http'); 2 var url = require('url'); 3 4 function serverStart(){ 5 http.createServer(function(req,res){ 6 var pathname = url.parse(req.url).pathname; 7 console.log('http request for '+pathname+' recieved'); 8 9 res.writeHead(200,{'Content-Type':'text/html'}); 10 res.write('<h1>Node.js</h1>'); 11 res.end(""); 12 }).listen(3000,'127.0.0.1'); 13 14 console.log('http server start on port 3000'); 15 } 16 17 exports.serverStart = serverStart;
通过第6行的解析,不同的请求路径在第7行输出不同的pathname。
建立一个名为router.js的文件,编写路由代码如下:
1 function route(pathname){ 2 console.log('about to route a request for'+pathname); 3 } 4 5 exports.route = route;
服务器应该知道路由的存在,并加以组合有效地利用。这里可以采用硬编码方式或依赖注入的方式实现组合,后者更好。
改造server.js如下:
1 var http = require('http'); 2 var url = require('url'); 3 4 function serverStart(route){ 5 http.createServer(function(req,res){ 6 var pathname = url.parse(req.url).pathname; 7 console.log('http request for '+pathname+' recieved'); 8 9 route(pathname); 10 11 res.writeHead(200,{'Content-Type':'text/html'}); 12 res.write('<h1>Node.js</h1>'); 13 res.end(""); 14 }).listen(3000,'127.0.0.1'); 15 16 console.log('http server start on port 3000'); 17 } 18 19 exports.serverStart = serverStart;
改造index.js如下:
1 var server = require("./server"); 2 var router = require("./router"); 3 4 server.serverStart(router.route);
编译运行,可看到路由模块被server模块引入。
行为驱动执行
在index中,我们将router对象传递进去,服务器随后调用这个对象的route函数。但其实服务器自身并不需要这个对象,它只是需要执行某个动作,而这个动作由该对象来完成。具体的细节服务器并不关心,因为这是执行这个动作的那个对象的事。这就是函数式编程。但归根结底,到了最后一层总有一个对象是真正关心细节并完成细节,输出结果的。像现实世界的上级把任务给下级,下级给再下级,最终总要有人完成这个任务才好!
路由到处理程序
路由用来转发请求,将请求分发给实际的处理程序,让他们解决请求并回复,因此新建请求处理模块requestHandlers.js,代码如下:
1 function start(){ 2 console.log("request handler 'start' was called"); 3 } 4 5 function upload(){ 6 console.log("request handler 'upload' was called"); 7 } 8 9 exports.start = start; 10 exports.upload = upload;
有了这个模块,路由就有路可寻了。
现在需要将处理程序通过一个对象来传递并将对象注入到route()函数中,而javascript的对象是”key:value“组合,满足我们的需要。将存放处理程序的对象引入index,如下:
1 var server = require("./server"); 2 var router = require("./router"); 3 var requestHandlers = require("./requestHandlers"); 4 5 var handler = {}; 6 handler['/'] = requestHandlers.start; 7 handler['/start'] = requestHandlers.start; 8 handler['/upload'] = requestHandlers.upload; 9 10 server.serverStart(router.route,handler);
路径为”/“或"/start"的请求由start处理,"/upload"由upload处理。
将该对象作为参数传给服务器,server.js模块代码改为:
1 var http = require('http'); 2 var url = require('url'); 3 4 function serverStart(route,handle){ 5 http.createServer(function(req,res){ 6 var pathname = url.parse(req.url).pathname; 7 console.log('http request for ''+pathname+'' recieved'); 8 9 route(handle,pathname); 10 11 res.writeHead(200,{'Content-Type':'text/html'}); 12 res.write('<h1>Node.js</h1>'); 13 res.end(""); 14 }).listen(3000,'127.0.0.1'); 15 16 console.log('http server start on port 3000'); 17 } 18 19 exports.serverStart = serverStart;
handle对象传递给了route,此时还得修改router模块,如下:
1 function route(handle,pathname){ 2 console.log('about to route a request for'+pathname); 3 4 if(typeof handle[pathname] === 'function'){ 5 handle[pathname](); 6 } 7 else{ 8 console.log('no request handler found for'+pathname); 9 } 10 } 11 12 exports.route = route;
首先检查对应的处理程序是否存在,存在则直接调用相应的函数,否则提示没有找到对应的函数。这时,服务器,路由,处理程序就联系在一起了。
让请求处理程序作出响应
web程序一般是基于http的请求-应答模式,这样服务器和浏览器可以实现通话。
一种不好的实现方式
这种方式让服务器的函数直接返回展示给用户的信息。这就需要同时修改服务器、路由、请求处理函数的部分代码:
requestHandlers.js
1 function start(){ 2 console.log("request handler 'start' was called"); 3 return "hello start!"; 4 } 5 6 function upload(){ 7 console.log("request handler 'upload' was called"); 8 return "hello upload!"; 9 } 10 11 exports.start = start; 12 exports.upload = upload;
requestHandlers.js
1 function route(handle,pathname){ 2 console.log('about to route a request for'+pathname); 3 4 if(typeof handle[pathname] === 'function'){ 5 return handle[pathname](); 6 } 7 else{ 8 console.log('no request handler found for'+pathname); 9 return "404 not found!" 10 } 11 } 12 13 exports.route = route;
server.js
1 var http = require('http'); 2 var url = require('url'); 3 4 function serverStart(route,handle){ 5 http.createServer(function(req,res){ 6 var pathname = url.parse(req.url).pathname; 7 console.log('http request for '+pathname+' recieved'); 8 9 10 res.writeHead(200,{'Content-Type':'text/html'}); 11 var content = route(handle,pathname); 12 res.write(content); 13 res.end(""); 14 }).listen(3000,'127.0.0.1'); 15 16 console.log('http server start on port 3000'); 17 } 18 19 exports.serverStart = serverStart;
这样的模式运行的也很好,但当有请求处理程序需要执行非阻塞操作,就“挂”了。
阻塞与非阻塞
修改requestHandlers.js
1 function start(){ 2 console.log("request handler 'start' was called"); 3 4 function sleep(milliSeconds){ 5 var startTime = new Date().getTime(); 6 while(new Date().getTime() < startTime + milliSeconds) 7 ; 8 } 9 10 sleep(10000); 11 return "hello start!"; 12 } 13 14 function upload(){ 15 console.log("request handler 'upload' was called"); 16 return "hello upload!"; 17 } 18 19 exports.start = start; 20 exports.upload = upload;
上述的sleep函数会让方法停顿10秒,然后才会返回结果。实际场景中,需要计算或是查找数据库等阻塞操作非常多。
现在通过start和upload即可模拟阻塞,打开两个空白页面分别输入“localhost:3000/start”和"localhost:3000/upload",先进行start请求在快速切换到量以页面进行upload请求,发现start页面请求恢复用了10秒,而upload也用了10秒。原因是,start中的sleep阻塞了所有其他处理。
而nodejs的特性之一是——单线程,可以在不增加线程情况下,对任务进行并行处理。这里的机制是它使用轮询(event loop)来实现并行操作,所有尽量避免阻塞操作而是用非阻塞操作。要使用非阻塞,需要使用回调,将函数作为参数传递给其他需要费时间处理的函数。
对于nodejs可以形象比喻成“嘿,probablyExpensiveFunction()(需要费时间处理的函数),继续做你的事情,我(nodejs线程)先不等你了,继续去处理后面的代码,请你提供一个回调callBackFunction(),等你处理完了我会去调用该回调函数的。”
一种错误的非阻塞方式
requestHandlers.js
1 var exec = require("child_process").exec; 2 3 function start(){ 4 console.log("request handler 'start' was called"); 5 var content = "empty"; 6 7 exec("ls-lah",function(error,stdout,stderr){ 8 content = stdout; 9 }); 10 return content; 11 } 12 13 function upload(){ 14 console.log("request handler 'upload' was called"); 15 return "hello upload!"; 16 } 17 18 exports.start = start; 19 exports.upload = upload;
引入另一个模块“child_process”,实现非阻塞操作exec()。
exec()的作用是从nodejs执行一个shell命令,例子中使用它获取当前目录下所有文件("ls-lah"),然后当start请求时将文件信息输出到浏览器。执行该例子,浏览器输出“empty”。原因在于,nodejs是同步执行,而为了非阻塞,exec()使用了回调函数,回调函数作为参数传递给exec(),而exec()是异步操作,即当他还没来得及执行回调,nodejs的同步性致使nodejs执行了exec()的下一个语句,这时候content并没有等来exec()的赋值,因此他还是“empty”。这和javascript中的同步异步很相像,每当需要执行ajax,并且需要ajax的结果时,我们将下一步的代码放在ajax执行成功时的回调里。
非阻塞方式对请求进行响应
我们可以采用值传递的方式将请求处理函数返回的内容再回传给http服务器。上述方式都是将请求处理函数的结果返回给http服务器,而另一种方式是将服务器传递给内容,即将response对象传递给请求处理程序,程序随后采用该对象上的方法对对请求进行响应。
server.js
1 var http = require('http'); 2 var url = require('url'); 3 4 function serverStart(route,handle){ 5 http.createServer(function(req,res){ 6 var pathname = url.parse(req.url).pathname; 7 console.log('http request for '+pathname+' recieved'); 8 9 route(handle,pathname,res); 10 11 }).listen(3000,'127.0.0.1'); 12 13 console.log('http server start on port 3000'); 14 } 15 16 exports.serverStart = serverStart;
以上将server.js中有关response的函数调用全部移除,将response对象传给route。
router.js
1 function route(handle,pathname,response){ 2 console.log('about to route a request for'+pathname); 3 4 if(typeof handle[pathname] === 'function'){ 5 return handle[pathname](response); 6 } 7 else{ 8 console.log('no request handler found for'+pathname); 9 response.writeHead(404,{"Content-Type":"text/plain"}); 10 response.write("404 not found!"); 11 response.end(); 12 } 13 } 14 15 exports.route = route;
requestHandlers.js
1 var exec = require("child_process").exec; 2 3 function start(response){ 4 console.log("request handler 'start' was called"); 5 6 exec("ls-lah",function(error,stdout,stderr){ 7 response.writeHead(200,{"Content-Type":"text/plain"}); 8 response.write(stdout); 9 response.end(); 10 }); 11 12 } 13 14 function upload(response){ 15 console.log("request handler 'upload' was called"); 16 17 response.writeHead(200,{"Content-Type":"text/plain"}); 18 response.write("hello upload"); 19 response.end(); 20 } 21 22 exports.start = start; 23 exports.upload = upload;
处理程序接收response对象,由该对象做出直接响应。在此编译,打开浏览器请求,“localhost:3000/start”不会对"localhost:3000/upload"造成阻塞。
更有用的场景
处理post请求
1 var exec = require("child_process").exec; 2 3 function start(response){ 4 console.log("request handler 'start' was called"); 5 6 var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post">'+'<textarea name="text" rows="20" cols="50"></textarea>'+ 7 '<input type="submit" value="submit"/>'+'</form></body></html>'; 8 9 response.writeHead(200,{"Content-Type":"text/html"}); 10 response.write(body); 11 response.end(); 12 13 } 14 15 function upload(response){ 16 console.log("request handler 'upload' was called"); 17 18 response.writeHead(200,{"Content-Type":"text/plain"}); 19 response.write("hello upload"); 20 response.end(); 21 } 22 23 exports.start = start; 24 exports.upload = upload;
以上是修改后的requestHandlers.js,运行后是个简单的表单,包括文本域和提交按钮。post数据有时候会很大,为使过程不阻塞,nodejs会将post数据拆分成很多很小的数据块,然后通过触发特定的事件,将这些小数据块传给回调函数。特定事件有data(表示新的小数据块到了)和end(表示所有数据块都已经接收完毕)。这时候我们需要告诉nodejs事件触发的时候调用哪些回调函数,通过什么方式告诉呢?在request对象上注册监听器(listener)来实现。获取所有来自请求端的数据并将数据传给应用层处理,是http服务器的事。所以直接在server里处理post数据,然后将最终的数据传给路由和请求处理器,让他们来进一步处理。
server.js
1 function serverStart(route,handle){ 2 http.createServer(function(req,res){ 3 var postData = ""; 4 var pathname = url.parse(req.url).pathname; 5 console.log('http request for '+pathname+' recieved'); 6 7 request.setEncoding("utf8"); 8 9 request.addListener("data",function(postDataChunk){ 10 postData += postDataChunk; 11 console.log('received post data chunk'+postDataChunk+"."); 12 }); 13 14 request.addListener("end",function(postDataChunk){ 15 route(handle,pathname,res,postData); 16 }); 17 18 }).listen(3000,'127.0.0.1'); 19 20 console.log('http server start on port 3000'); 21 } 22 23 exports.serverStart = serverStart;
上述代码做了3件事,首先设置接收数据格式为utf8,然后绑定data事件的监听器,用于接收每次传递的新数据块,复制给postData,最后将路由调用移到end中,确保数据接收完成在触发并且只触发一次。
requestHandlers.js
1 var querystring = require("querystring"); 2 function start(response,postData){ 3 console.log("request handler 'start' was called"); 4 5 var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post">'+'<textarea name="text" rows="20" cols="50"></textarea>'+ 6 '<input type="submit" value="submit"/>'+'</form></body></html>'; 7 8 response.writeHead(200,{"Content-Type":"text/html"}); 9 response.write(body); 10 response.end(); 11 12 } 13 14 function upload(response,postData){ 15 console.log("request handler 'upload' was called"); 16 17 response.writeHead(200,{"Content-Type":"text/plain"}); 18 response.write("you are sent:"+querystring.parse(postData).text); 19 response.end(); 20 } 21 22 exports.start = start; 23 exports.upload = upload;
通过querystring筛选出我们感兴趣的部分,以上就是关于post数据处理的内容。
处理文件上传
处理文件上传就是处理post数据,有时候麻烦的是细节处理。所以这里使用现成的方案,即外部模块node-formidable,用nmp命令安装:
nmp install formidable
该模块做的就是通过http post请求提交的表单,在nodejs中可以被解析。我们创建一个IncomingForm,它是对提交的表单的抽象表示,之后就可以用他来解析request对象,获取需要的字段数据。关于该模块具体信息及工作原理,其官网有实例。
现在的问题是保存在本地硬盘的内容如何显示在浏览器中。我们需要将其读取到服务器,使用fs模块完成。
1 var querystring = require("querystring"), 2 fs = require("fs"); 3 function start(response,postData){ 4 console.log("request handler 'start' was called"); 5 6 var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post">'+'<textarea name="text" rows="20" cols="50"></textarea>'+ 7 '<input type="submit" value="submit"/>'+'</form></body></html>'; 8 9 response.writeHead(200,{"Content-Type":"text/html"}); 10 response.write(body); 11 response.end(); 12 13 } 14 15 function upload(response,postData){ 16 console.log("request handler 'upload' was called"); 17 18 response.writeHead(200,{"Content-Type":"text/plain"}); 19 response.write("you are sent:"+querystring.parse(postData).text); 20 response.end(); 21 } 22 23 function show(response,postData){ 24 console.log("request handler 'show' was called"); 25 fs.readFile("/tmp/test.png","binary",function(error,file){ 26 if(error){ 27 response.writeHead(500,{"Content-Type":"text/plain"}); 28 response.write(error+"\n"); 29 response.end(); 30 }else{ 31 response.writeHead(200,{"Content-Type":"image/png"}); 32 response.write(file,"binary"); 33 response.end(); 34 } 35 }); 36 } 37 38 exports.start = start; 39 exports.upload = upload; 40 exports.show = show;
将其添加到index.js的路由映射表中:
1 var server = require("./server"); 2 var router = require("./router"); 3 var requestHandlers = require("./requestHandlers"); 4 5 var handler = {}; 6 handler['/'] = requestHandlers.start; 7 handler['/start'] = requestHandlers.start; 8 handler['/upload'] = requestHandlers.upload; 9 handler['/show'] = requestHandlers.show; 10 11 server.serverStart(router.route,handler);
编译,浏览器请求即可看见图片。
最后,
需要在/start表单添加文件上传元素
将formidable整合到upload中用于将上传的图片保存到指定路径
将上传的图片内嵌到/upload url输出的html中
第一项,移除此前的文本区,添加上传组件和“multipart/form-data”编码类型:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 var querystring = require("querystring"), 2 fs = require("fs"); 3 function start(response,postData){ 4 console.log("request handler 'start' was called"); 5 6 var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post" enctype="multipart/form-data">'+ 7 '<input type="file" name="upload"/><input type="submit" value="upload file">'+'</form></body></html>'; 8 9 response.writeHead(200,{"Content-Type":"text/html"}); 10 response.write(body); 11 response.end(); 12 13 } 14 15 function upload(response,postData){ 16 console.log("request handler 'upload' was called"); 17 18 response.writeHead(200,{"Content-Type":"text/plain"}); 19 response.write("you are sent:"+querystring.parse(postData).text); 20 response.end(); 21 } 22 23 function show(response,postData){ 24 console.log("request handler 'show' was called"); 25 fs.readFile("/tmp/test.png","binary",function(error,file){ 26 if(error){ 27 response.writeHead(500,{"Content-Type":"text/plain"}); 28 response.write(error+"\n"); 29 response.end(); 30 }else{ 31 response.writeHead(200,{"Content-Type":"image/png"}); 32 response.write(file,"binary"); 33 response.end(); 34 } 35 }); 36 } 37 38 exports.start = start; 39 exports.upload = upload; 40 exports.show = show;
这时候我们需要在upload中对请求中的上传文件进行处理,这样的话需要将request传给node-formidable的form-parse函数。由于nodejs不会对数据作缓冲,于是必须将request对象传入。
server.js:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 var http = require('http'); 2 var url = require('url'); 3 4 function serverStart(route,handle){ 5 http.createServer(function(req,res){ 6 7 var pathname = url.parse(req.url).pathname; 8 console.log('http request for '+pathname+' recieved'); 9 10 route(route,handle,res,req); 11 12 }).listen(3000,'127.0.0.1'); 13 14 console.log('http server start on port 3000'); 15 } 16 17 exports.serverStart = serverStart;
router.js:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function route(handle,pathname,response,request){ 2 console.log('about to route a request for'+pathname); 3 4 if(typeof handle[pathname] === 'function'){ 5 return handle[pathname](response,request); 6 } 7 else{ 8 console.log('no request handler found for'+pathname); 9 response.writeHead(404,{"Content-Type":"text/plain"}); 10 response.write("404 not found!"); 11 response.end(); 12 } 13 } 14 15 exports.route = route;
将上传和重命名的操作放在一起:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 var querystring = require("querystring"), 2 fs = require("fs"), 3 formidable = require("formidable"); 4 function start(response){ 5 console.log("request handler 'start' was called"); 6 7 var body = '<html>'+'<head>'+'<body>'+'<form action="/upload" method="post" enctype="multipart/form-data">'+ 8 '<input type="file" name="upload"/><input type="submit" value="upload file">'+'</form></body></html>'; 9 10 response.writeHead(200,{"Content-Type":"text/html"}); 11 response.write(body); 12 response.end(); 13 14 } 15 16 function upload(response,postData){ 17 console.log("request handler 'upload' was called"); 18 19 var form = new formidable.IncomingForm(); 20 form.parse(request,function(error,fields,files){ 21 fs.renameSync(file.upload.path,"/tmp/test.png"); 22 response.writeHead(200,{"Content-Type":"text/html"}); 23 response.write("image:</br>"); 24 response.write("<image src='/show'/>"); 25 response.end(); 26 }); 27 28 } 29 30 function show(response,postData){ 31 console.log("request handler 'show' was called"); 32 fs.readFile("/tmp/test.png","binary",function(error,file){ 33 if(error){ 34 response.writeHead(500,{"Content-Type":"text/plain"}); 35 response.write(error+"\n"); 36 response.end(); 37 }else{ 38 response.writeHead(200,{"Content-Type":"image/png"}); 39 response.write(file,"binary"); 40 response.end(); 41 } 42 }); 43 } 44 45 exports.start = start; 46 exports.upload = upload; 47 exports.show = show;
好,编译,重启浏览器。选择本地图片,上传并显示!
结构图如下:
该实例有关的技术点:
服务器端javascript
函数式编程
阻塞与非阻塞
单线程
回调
事件
nodejs模块
没有介绍到的还有数据库操作、单元测试、开发外部模块等。
注:本文摘抄自《nodejs入门》
![](https://files-cdn.cnblogs.com/files/thingk/%E5%BE%AE%E4%BF%A1%E6%94%B6%E6%AC%BE%E7%A0%81.bmp)