Node.js服务器教程：处理图片上传与显示

172 浏览量更新于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页未读，立即下载

weixin_38739744

粉丝: 3
资源: 934

Node.js服务器教程：处理图片上传与显示

轻松创建nodejs服务器（10）：处理POST请求

轻松创建nodejs服务器（4）：路由

轻松创建nodejs服务器（5）：事件处理程序

nodejs SyntaxError: Unexpected identifier

如何在Node.js中使用Crypto模块实现数据的加密和解密操作？请结合《NodeJS中文文档：入门到精通》中的相关知识给出示例。

nodejs安装方法：CSDN

Could not resolve org.nodejs:node:8.10.0.

nodejs Uncaught Error: read ECONNRESET 如何解决

opencv4nodejs matchShapes TypeError: Cannot read property 'I2' of undefined

nodejs : Depends: libc6 (>= 2.28) but 2.27-3ubuntu1.6 is to be installed E: Unable to correct problems, you have held broken packages.

最新资源