如何在 JS 中使用 fetch() 从数据库中获取图像

在前端开发中，我们经常需要从数据库中获取图像来显示在页面上。常用的方法是使用 fetch() 函数来发送请求并获取响应。本文将介绍如何使用 fetch() 从数据库中获取图像。

发送 GET 请求

首先，我们需要准备一个能够响应 GET 请求的 API 接口，用于从数据库中获取图像数据。接下来，我们在前端代码中使用 fetch() 函数发送 GET 请求，并在响应中获取图像数据。

fetch('/api/getImage?id=1')
  .then(response => response.blob())
  .then(blob => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  })
  .catch(error => console.error(error));

上述代码中，我们向 /api/getImage 发送 GET 请求，并将响应数据转换为二进制对象。接着，我们通过 URL.createObjectURL() 方法将二进制对象转换为图片 URL，并将图片添加到页面中。

发送 POST 请求

如果需要向 API 接口发送数据来获取图像，我们需要使用 POST 请求。下面是一个使用 fetch() 函数发送 POST 请求的示例代码：

const data = { id: 1 };
const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
};

fetch('/api/getImage', options)
  .then(response => response.blob())
  .then(blob => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  })
  .catch(error => console.error(error));

上述代码中，我们通过 JSON.stringify() 方法将数据转换为 JSON 字符串，并在请求头中设置 Content-Type: application/json。接着，我们向 /api/getImage 发送 POST 请求，并将响应数据转换为二进制对象。最后，我们通过 URL.createObjectURL() 方法将二进制对象转换为图片 URL，并将图片添加到页面中。

总结

使用 fetch() 函数可以方便地从数据库中获取图像数据，并在页面中显示。本文介绍了如何发送 GET 和 POST 请求，并将响应数据转换为图片 URL。这些技术在实际的前端开发中非常常用，希望能对读者有所帮助。