Node.js服务器教程：处理图片上传与显示
25 浏览量
更新于2024-08-29
收藏 125KB PDF 举报
"本教程介绍了如何使用Node.js和Felix Geisendörfer的node-formidable模块处理用户上传的图片并显示在浏览器中。主要内容包括安装formidable模块、解析POST请求中的文件数据、读取并展示本地文件以及处理图片上传的HTTP请求。"
在Node.js环境中，处理用户上传的文件，尤其是图片，通常需要借助第三方库。在这个例子中，我们将使用`formidable`模块，这是一个专门用于处理HTTP表单上传文件的库。首先，你需要在命令行环境中通过`npm install formidable`来安装这个模块。安装成功后，你可以通过`require('formidable')`将其引入到你的项目中。
`formidable`模块的核心功能是解析通过HTTP POST请求提交的表单数据。它创建了一个`IncomingForm`对象，该对象能够解析request对象，从中提取出表单字段和上传的文件。当用户上传图片时，这些数据会被解析成易于处理的形式。
为了在浏览器中显示上传的图片，我们需要使用Node.js内置的`fs`模块来读取本地文件系统中的图片。例如，假设图片被保存在`/tmp/test.png`，我们可以使用`fs.readFile`或`fs.readFileSync`来读取文件内容，然后通过HTTP响应返回给客户端，让浏览器显示。
在`requestHandlers.js`中，我们需要添加一个处理`/showURL`请求的函数，这个函数会读取指定路径的图片文件，并将其内容作为响应返回。同时，我们还需要一个处理`/upload`请求的函数，用于接收上传的图片。在表单中，用户可以通过`<input type="file">`标签选择要上传的图片。
处理`/upload`请求时，我们需要监听`'end'`事件，这表示整个文件上传已经完成。在这个事件的回调函数中，我们可以访问到上传的文件信息，包括文件名、大小等，然后将其保存到服务器的特定目录下。为了安全和管理方便，通常我们会将上传的文件保存在与应用代码隔离的目录。
这个过程涉及到以下几个关键步骤：
1. 安装`formidable`模块。
2. 在服务器端创建`IncomingForm`实例并监听文件上传事件。
3. 处理`/upload`请求，保存上传的图片文件。
4. 使用`fs`模块读取并发送图片内容，处理`/showURL`请求。
5. 在HTML中设置表单，允许用户选择并上传图片。
理解并实现这些步骤，你就能创建一个简单的Node.js服务器，支持用户上传图片并在浏览器中查看。不过，实际应用中，你可能还需要考虑错误处理、文件命名规则、文件大小限制、安全策略（如防止恶意文件上传）等问题，以确保服务的稳定性和安全性。
轻松创建轻松创建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();
}
});
下载后可阅读完整内容，剩余4页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
2020-10-25 上传
140 浏览量
点击了解资源详情
点击了解资源详情
1394 浏览量
2021-06-25 上传
weixin_38739744
- 粉丝: 3
- 资源: 934
我的内容管理
展开
最新资源
- minishift-demo:使用minishift进行本地开发的演示
- 初级java笔试题-awesome-stars:由stargazed整理的我的GitHub星星列表
- docker-plex：Ubuntu Groovy上的Plex
- jdk1.8.0_241.zip
- 商品管理
- Homitech
- DuckCreekAutomation：DuckCreekAutomation
- 首尔大卖场观感：从顾客需求出发提升服务
- prelude-ls:prelude.ls是一个面向功能的实用程序库-功能强大且灵活，几乎所有功能都可以使用。 它是用http编写的，并且是http的推荐基础库
- java笔试题算法-lbfgsb_wrapper:FortranL-BFGS-B算法的Java包装器
- JavaScriptViewEngine-master.zip
- 2019 5G+智能工厂网络及应用白皮书精品报告2020.rar
- malves0
- 销售点管理系统简介——卖场管理
- Công Cụ Đặt Hàng Của Vận Tải Hoa Kiều-crx插件
- gdblib:Go库，用于使用MI接口与gdb调试器接口
