nodejs如何读取文件二进制 前端响应blob或base64显示图片

一、读取文件二进制

在Node.js中，要读取文件二进制，可以使用Node.js内置的fs模块。可以通过调用fs.readFile方法来读取文件并将其保存到Buffer中，然后将其转换为二进制字符串。

以下是一个简单的示例：

const fs = require('fs');

fs.readFile('./image.jpg', (err, image) => {
  if (err) throw err;

  const imageBinary = image.toString('binary');
  console.log(imageBinary);
});

这个示例从当前目录下的image.jpg文件中读取了二进制数据，并将其保存到Buffer对象中。然后，通过调用Buffer.toString方法将Buffer对象转换为二进制字符串，并打印到控制台中。

二、前端响应blob或base64显示图片

在前端，可以使用Blob对象或Base64字符串来显示图片。下面分别介绍它们的实现方法。

1. Blob对象

要使用Blob对象来显示图片，可以使用XMLHttpRequest对象中的responseType属性。将其设置为"blob"，即可将响应类型设置为Blob对象。然后，可以使用URL.createObjectURL方法将Blob对象转换为URL，并将其传递给img元素的src属性。

以下是实现代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/image.jpg', true);
xhr.responseType = 'blob';
xhr.onload = () => {
  if (xhr.status === 200) {
    const imageBlob = xhr.response;
    const imageUrl = URL.createObjectURL(imageBlob);
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  }
};
xhr.send();

这个示例发送了一个GET请求来获取图片，然后将其响应类型设置为Blob对象。在加载完成之后，通过调用URL.createObjectURL方法将Blob对象转换为URL，并使用img元素来显示它。

1. Base64字符串

要使用Base64字符串来显示图片，可以在XMLHttpRequest对象中使用responseType属性将响应类型设置为text格式。在xhr.onload中，通过调用window.btoa方法将响应字符串转换为Base64字符串，并将其传递给img元素的src属性。

以下是实现代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/image.jpg', true);
xhr.responseType = 'text';
xhr.onload = () => {
  if (xhr.status === 200) {
    const imageBase64 = xhr.response;
    const imageUrl = `data:image/jpeg;base64,${imageBase64}`;
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  }
};
xhr.send();

这个示例发送了一个GET请求来获取图片，并将响应类型设置为文本格式。在加载完成之后，通过调用window.btoa方法将响应字符串转换为Base64字符串，并使用img元素来显示它。这里需要注意的是，在生成Base64字符串时需要指定相应图片的MIME类型。