js图片下载之后端部分

nodejs
  目录
  1. 1. js图片下载之后端部分
    1. 1.1. 方法一
    2. 1.2. 方法二
    3. 1.3. 方法三
    4. 1.4. 总结

nodejs服务返回图片二进制数据

js图片下载之后端部分

本站《js图片下载之前端部分》,写了如何利用js来下载图片，第二种方式需要后端返回图片的二进制数据，这篇文章我来写一下如何使用nodejs向前端返图片的二进制数据，我总结了三种方法。

方法一

1
2
3
4
5
app.post('/downimg', function (req, res, next) {
  res.header("Content-Type", "application/octet-stream");
  fs.createReadStream('./img/1.jpg')
  .pipe(res);
});

这种方法利用了stream和pipe，一行代码就解决了，利用fs去读取图片的流只有，用pipe方法把流转给res，res自动就把数据返回给前端。

方法二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
app.post('/downimg', function (req, res) {
  res.header("Content-Type", "application/octet-stream");
  var data = '';
  var readerStream = fs.createReadStream(process.cwd() + '/img/1.jpg');
  // 设置编码为 binary 必须
  readerStream.setEncoding('binary');
  readerStream.on('data', function(chunk) {
     data += chunk;
  });
  readerStream.on('end',function(){
    // 必须加上binary，返回的是二进制
    res.end(data, 'binary');
  });
  readerStream.on('error', function(err){
     console.log(err.stack);
  });
});

这个方法其实跟第一个差不多，都是使用了fs的流来读取图片，但是没有使用pipe直接把数据流转给res，需要自己监听数据来处理，这里我试验了好多方式，终于成功了，注意readerStream.setEncoding(‘binary’)和res.end(data, ‘binary’)，都需要加上binary格式。

方法三

1
2
3
4
5
6
7
8
9
app.post('/downimg', function (req, res) {
    res.header("Content-Type", "application/octet-stream");
    fs.readFile('./img/1.jpg', function (err, data) {
     if (err) {
         return console.error(err);
     }
     res.end(data);
  });
});

这种方法时最简单的，但是遇到大文件会影响计算机的性能。

总结

最后整体代码贴一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var express = require('express');
var fs = require('fs');
var app = express();
 
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

// stream+pipe方式一
app.post('/downimg', function (req, res, next) {
  res.header("Content-Type", "application/octet-stream");
  fs.createReadStream('./img/1.jpg')
  .pipe(res);
});
 
// stream方式二
app.post('/downimg', function (req, res) {
  res.header("Content-Type", "application/octet-stream");
  var data = '';
  var readerStream = fs.createReadStream(process.cwd() + '/img/1.jpg');
  // 设置编码为 binary 必须
  readerStream.setEncoding('binary');
  readerStream.on('data', function(chunk) {
     data += chunk;
  });

  readerStream.on('end',function(){
    // 必须加上binary，返回的是二进制
    res.end(data, 'binary');
  });

  readerStream.on('error', function(err){
     console.log(err.stack);
  });
});

// 直接读取整个文件方式三
app.post('/downimg', function (req, res) {
    res.header("Content-Type", "application/octet-stream");
    fs.readFile('./img/1.jpg', function (err, data) {
     if (err) {
         return console.error(err);
     }
     res.end(data);
  });
});

var server = app.listen(3000, function () {
  console.log("应用实例，访问地址为 http://%s:%s", '127.0.0.1', '3000')
})

  图片处理