如何使用 Express 通过 HTTP 发送图像答案

【问题标题】：How to send an image via HTTP using Express如何使用 Express 通过 HTTP 发送图像
【发布时间】：2019-07-11 10:19:30
【问题描述】：

我正在使用 NodeJS 开发一种 API。

我需要做一种getImage，将与名称对应的图像返回到url中（例如：localhost:8080/getImage/myImg）。

我在互联网上找到了很多教程，但问题是我不能使用 FS 的 writeFile 和 readFile，因为我的图像存储在一个包含其他 JSON 信息的数组中。我存储的图像由 tomCat 中的另一个 API 发送，我的工作是通过设置 NodeJS API 来限制对 tomCat API 的调用。

我的问题是如何发送存储到变量/数组/json 中的图像？

我尝试了下面的代码，但是当我去 localhost:8080/getImage/myImg 时，代码被执行，但没有返回任何内容。我没有尝试使用一种 tmp 文件夹来存储图像，因为我正在开发一个大型产品，如果我可以限制对磁盘的访问，那就太好了。

app.get('/getImage/:name', (req, res) => {
  imagesArray.forEach( (image) => {
    if(req.params.name === image.small_image_name) {
      res.writeHead(200, {'content-type': 'image/jpeg'})
      res.end(image.small_image, 'binary')
    } else if (req.params.name === image.full_image_name) {
      res.writeHead(200, {'content-type': 'image/jpeg'})
      res.end(image.full_image, 'binary')
    }
  })
})

我要做的事情是：您使用图像名称作为参数对 url 进行 http 请求，以“下载”图像并更改在我的主页上显示的元素的背景。

感谢您未来的回答。祝你有美好的一天！

【问题讨论】：

你的循环很危险，因为根据数组的内容，它可能永远不会结束请求，或者它可能会多次调用ˋ.endˋ，这显然也不起作用。您应该将 forEach 替换为 ˋ.findˋ 以查找要发送的图像，然后再替换为 ˋ.endˋonce。然后你可能会发现没有找到任何图像，因此没有返回任何内容

标签： javascript node.js image express http

【解决方案1】：

这段代码会做你想做的事，我假设 image.small_image 和 image.full_image 包含带有图像数据的 Buffer 对象。如果图像数据存储为字节数组或base64字符串，这很容易转换为缓冲区。

app.get('/getImage/:name', (req, res) => {
    const image = imagesArray.find(image => (req.params.name === image.small_image_name || req.params.name === image.full_image_name));

    if (!image) {
        res.status(404).send("Image not found");
        return;
    }

    const imageBuffer = (req.params.name === image.small_image_name) ? image.small_image: image.full_image;
    res.writeHead(200, { 'content-type': 'image/jpeg' })
    res.end(imageBuffer, 'binary')
});

我在本地机器上使用端口 3000，所以请求 url 看起来像：

http://localhost:3000/getImage/test.jpg

另一种方法是预先创建图像地图，这将提高检索效率。请注意，这可能会增加进程的内存需求。

const imageMap = imagesArray.reduce((map, image) => { 
    map[image.small_image_name] = { name: image.small_image_name, data: image.small_image };
    map[image.full_image_name] = { name: image.full_image_name, data: image.full_image };
    return map;
}, {});

app.get('/getImage/:name', (req, res) => {
    const image = imageMap[req.params.name];
    if (!image) {
        res.status(404).send("Image not found");
        return;
    }

    res.writeHead(200, { 'content-type': 'image/jpeg' })
    res.end(image.data, 'binary')
});

【讨论】：

【解决方案2】：

我在 tomCat API 上做请求的方式如下

http.get('http://10.10.0.8:8080/CWallWeb/ajax/getImage.jsp?f=' + body.data[i].urlPreviewPath + '&d=' + date, res => {
    let body = ''

    res.on('data', data => {
        body += data
    });
    res.on('end', () => {
        small_image = body
    });
});

明明不是缓冲区是字符串，如何将http请求的结果转成缓冲区？

【讨论】：