nodejs读取图片返回给浏览器显示

本文旨在介绍如何使用Node.js处理图片等资源并将其返回给浏览器进行显示。除了图片，此方法同样适用于音频、视频等其他非字符串文件的处理和显示。这也可以作为开发nodejs静态资源服务器的一种方法。

一、请求头详解

在HTTP响应中，Content-Type字段用于说明文件渲染的MIME类型，这在我们今天的讨论中至关重要。以下是常用文件类型的MIME类型对照表：

{对照表}

二、处理方法

1. 静态资源返回

这一部分的原理是通过Node.js的fs.readFile模块来处理。根据请求地址获取实际的文件地址，判断文件是否存在。如果文件不存在，则返回404错误；如果文件存在，则读取文件并返回。

设置请求的返回头Content-Type，类型从上述的对照表中选择。然后，以二进制格式读取文件并返回。这是因为如果文件格式不正确，可能会导致错误。示例代码如下：

//设置请求的返回头Content-Type

response.setHeader("Content-Type", contentType);

//读取文件并返回，格式为二进制

var content = fs.readFileSync(url,"binary");

response.writeHead(200, "Ok");

response.write(content,"binary");

response.end();

2. 动态文件流处理

这一部分的原理是使用Node.js的fs.createReadStream来处理。这种方法的好处是支持断点续传。使用流的方式处理大文件，可以显著提高性能和响应速度。示例代码如下：

//创建可读流

var stream = fs.createReadStream(url);

//设置请求的返回头Content-Type和Content-Length（如果需要）

response.setHeader("Content-Type", contentType);

response.setHeader("Content-Length", fileSize); //fileSize为文件大小

//将流管道到响应中

stream.pipe(response); //当数据从流中读取时，会自动写入到响应中

stream.on('end', function() { //当文件读取结束时，结束响应

response.end();

});

stream.on('error', function(err){ //处理可能出现的错误

console.error('Error occurred:', err);

response.end();

});

我们来设置正确的响应类型，告诉接收方我们将发送什么类型的数据。例如，如果我们正在发送一张图片，我们会设置响应类型为图片对应的MIME类型。代码如下：

```javascript

response.set('content-type', mimeType); //告知接收方我们将发送什么类型的数据

```

然后，我们从文件系统中创建一个读取流来读取文件内容。这个流会帮助我们逐步读取文件内容，而不是一次性加载整个文件，这对于大文件来说非常有用。

```javascript

var stream = fs.createReadStream(imageFilePath); //逐步读取文件内容

```

为了处理这个流，我们需要监听它的数据事件和结束事件。每当流中有新的数据可用时，数据事件就会被触发。我们将这些数据块收集起来，等到流结束时，我们将所有的数据块合并成一个大的数据缓冲区，然后将其写入响应。

```javascript

var responseData = []; //存储文件流的数据块

if (stream) { //判断流的状态

stream.on('data', function(chunk) {

responseData.push(chunk); //收集数据块

});

stream.on('end', function() {

var finalData = Buffer.concat(responseData); //合并数据块

response.write(finalData); //发送数据

response.end(); //结束响应

});

}

```

对于在客户端读取文件并传递给httpServer的过程，我们需要特别注意文件的处理方式。不能直接以普通的字符串方式处理文件内容，也不能直接把Buffer传给httpServer。正确的做法是把文件内容转为数组，然后把这个数组转为Buffer再传给httpServer。返回给客户端的时候，需要把Buffer转为字符串，注意这里的编码不是普通的utf-8。因为Node.js以binary格式读取的文件就是一个字符串。这个过程描述如下：

1. 客户端读取文件：`var content = fs.createReadStream(filePath)`。