轻松创建nodejs服务器(10):处理上传图片

在这一部分，我们将实现用户上传图片并在浏览器中显示。

这里使用的外部模块是费利克斯盖森德尔开发的强大节点模块。它为解析上传的文件数据提供了一个很好的抽象。

要安装这个外部模块，命令应该在cmd下执行：复制代码如下：npm安装强大。如果输出类似信息，则表示安装成功：复制代码如下： NPM info build success :【email protected】安装成功后，我们可以随请求引入：复制代码如下： var formulable=require(“formulable”)；这个模块在这里做的是通过HTTP POST请求提交表单，可以在Node.js中解析，我们需要做的是创建一个新的IncomingForm，它是提交表单的抽象表示。之后，我们可以使用它来解析请求对象，并获取表单中所需的数据字段。

此案例的图片文件存储在/tmp文件夹中。

先解决一个问题：如何在浏览器中显示本地硬盘保存的文件？

我们使用fs模块将文件读入服务器。

让我们为/showURL添加一个请求处理程序，它将文件/tmp/test.png的内容直接硬编码到浏览器中。当然，你需要先把图片保存到这个位置。

我们的团队requestHandlers.js做了一些修改：

复制代码如下：VAR查询字符串=require('查询字符串')，fs=require(' fs ')；函数启动(响应，后置数据){console.log('请求处理程序' start '被调用。');var body=' html ' ' head ' ' meta http-equiv=' Content-Type ' ' ' Content=' text/html；charset=UTF-8 '/' '/head ' ' body ' ' form action='/upload ' method=' post ' ' ' text area name=' text ' rows=' 20 ' cols=' 60 '/text area ' '输入类型=' Submit ' value=' Submit text '/' '/form ' '/body ' '/html '；response.writeHead(200，{ ' Content-Type ' : ' text/html ' })；response.write(正文)；response . end()；}函数上传(响应，postData) {console.log('请求处理程序' upload '被调用，');response.writeHead(200，{ ' Content-Type ' : ' text/plain ' })；response.write('您已经发送了text : ' query string . parse(post data)。文本)；response . end()；}函数show(response，postData) {console.log('请求处理程序' show '被调用，');fs.readFile('/tmp/test.png '，' binary '，函数(错误，文件){ if(错误){ response.writeHead(500，{ ' Content-Type ' : ' text/plain ' })；response.write(错误' \ n ')；response . end()；} else { response.writeHead(200，{ ' Content-Type ' : ' image/png ' })；response.write(文件，‘binary’)；response . end()；}});} exports.start=startexports.upload=上传；exports.show=show

我们还需要向index.js中的路由映射表添加这个新的请求处理程序：

复制代码如下： var server=require('。/server’)；var router=require('。/router’)；var requestHandlers=require('。/RequestHandlers’)；var handle={ } handle['/']=request handlers . 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-harvest集成到我们的上传请求处理程序中，该程序用于将上传的图片保存到/tmp/test.png。

通过/uploadURL将上传的图片嵌入到HTML输出中。

第一个很简单。只需添加一个多部分/表单数据编码类型，删除前面的文本区域，添加一个文件上传组件，并将提交按钮的副本更改为“上传文件”。下面显示了requestHandler.js:

复制代码代码如下： var查询字符串=require('查询字符串')，fs=require(' fs ')；函数启动（响应，后置数据){console.log('请求处理程序开始被调用。');var body=' html ' ' head ' ' meta http-equiv=' Content-Type ' ' ' Content=' text/html；charset=UTF-8 '/' '/head ' ' body ' '表单操作='/Upload ' enctype=' multipart/form-data ' ' '方法=' post ' ' '输入类型=' file ' name=' Upload ' ' '输入类型=' submit ' value=' Upload file '/' form ' '/body ' '/html '；response.writeHead(200，{ ' Content-Type ' : ' text/html ' })；response.write(正文);回应。end()；}函数上传（响应，postData) {console.log('请求处理程序“上传”被调用，');response.writeHead(200，{ ' Content-Type ' : ' text/plain ' })；response.write('您已经发送了文本： '查询字符串。解析(发布数据).文本);回应。end()；}函数show(response，postData) {console.log('请求处理程序'显示'被调用，');fs.readFile('/tmp/test.png '，'二进制'，函数（错误，文件){ if(错误){ response.writeHead(500，{ ' Content-Type ' : ' text/plain ' })；response.write(错误\ n ')；回应。end()；} else { response.writeHead(200，{ ' Content-Type ' : ' image/png ' })；response.write(文件，' binary ')；回应。end()；}});} exports . start=startexports . upload=上传；exports.show=show

接下来，我们要完成第二步，我们从server.js开始—— 移除对postData的处理以及request.setEncoding(这部分令人敬畏的节点自身会处理),转而采用将请求对象传递给请求路由的方式：

复制代码代码如下： var http=require(' http ')；var URL=必选(' URL ')；函数开始(路由，句柄){请求(请求，响应)上的函数} { var pathname=URL。解析(请求。网址).路径名；控制台。日志('收到对路径名的请求');路由（句柄、路径名、响应、请求);}http.createServer(onRequest).听(8888);控制台。日志('服务器已启动');} exports.start=start

接下来修改router.js，这次要传递请求对象：

复制代码代码如下：函数路由（句柄、路径名、响应、请求){console.log('即将为路径名路由请求);if(句柄[路径名]===' function '){句柄[路径名](响应，请求);} else { console。日志('路径名'找不到请求处理程序);response.writeHead(404，{ ' Content-Type ' : ' text/html ' })；response.write('404未找到');回应。end()；} } exports.route=route

现在，请求对象就可以在我们的上传请求处理程序中使用了节点-强大会处理将上传的文件保存到本地/tmp目录中，而我们需

要做的是确保该文件保存成/tmp/test.png。

接下来，我们把处理文件上传以及重命名的操作放到一起，如下requestHandlers.js所示：

复制代码代码如下： var查询字符串=require('查询字符串')、fs=require('fs ')、removable=require(' removable ')；函数启动（响应){console.log('请求处理程序开始被调用');var body=' html ' ' head ' ' meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8' /' '/head' 'body ' '表单操作='/Upload ' enctype='多部分/表单-数据' ' '方法=“发布”输入类型='文件'名称='上传'多个='多个'输入类型=' submit '值='上传文件'/' '/表单' '/正文' '/html '；response.writeHead(200，{ ' Content-Type ' : ' text/html ' })；response.write(正文);回应。end()；}函数上传（响应，请求){console.log('请求处理程序“上传”被调用');定义变量形式=新的强大IncomingForm()；console.log('即将解析');form.parse(请求、函数（错误、字段、文件){ console.log('解析完成');fs。renamesync(文件。上传。路径，'/tmp/test。png ')；response.writeHead(200，{ ' Content-Type ' : ' text/html ' })；response.write('收到的图像： br/')；回应。write(' img src='/show '/')；回应。end()；});}函数show(response) {console.log('已调用请求处理程序show’)；fs.readFile('/tmp/test.png '，'二进制'，函数（错误，文件){ if(错误){ response.writeHead(500，{ ' Content-Type ' : ' text/plain ' })；response.write(错误\ n ')；回应。end()；} else { response.writeHead(200，{ ' Content-Type ' : ' image/png ' })；response.write(文件，' binary ')；回应。end()；}});} exports . start=startexports . upload=上传；exports.show=show

做到这里，我们的服务器就全部完成了。

在执行图片上传的过程中，有的人可能会遇到这样的问题：

照成这个问题的原因我猜测是由于磁盘分区导致的，要解决这个问题就需要改变可怕的的默认零时文件夹路径，保证和目标目录处于同一个磁盘分区。

我们找到requestHandlers.js的上传函数，将它做一些修改：

复制代码代码如下：函数上载（响应，请求){ console.log('调用了请求处理程序上传’)；定义变量形式=新的强大IncomingForm()；console.log('即将解析');form.uploadDir=' tmpform.parse(请求、函数（错误、字段、文件){ console.log('解析完成');fs。renamesync(文件。上传。路径，'/tmp/test。png ')；response.writeHead(200，{ ' Content-Type ' : ' text/html ' })；response.write('收到的图像： br/')；回应。write(' img src='/show '/')；回应。end()；});}我们增加了一句form.uploadDir="tmp "，现在重启服务器，再执行上传操作，问题完美解决。