javascript - Express.js : respond with image file instead of binary file?

Question

在express中，我试图用图像响应React请求，但是，我得到的是图像二进制文件而不是图像文件。

我尝试使用 res.sendFile 和 res.download，但它们发送的是二进制文件。我也尝试了 res.attachment，但它的工作不一致，并且以某种方式使响应挂起。

我尝试使用 res.type("image/jpeg") 指定文件类型，但没有什么区别。

router.get("/photo", (req, res) => {

  res.type("image/jpeg");
  res.sendFile("/absolute/path/image.jpg");

});

我期待一个具有名称、大小等正常属性的图像文件。

Answer 1

我认为您在“图像文件”和“图像二进制文件”之间所做的区别误导了您。所有位图图像文件均以二进制编码(或者，在极少数情况下，以 base64 编码)，因此我认为这并不能解决问题的根源。

res.sendFile 应该可以正常工作。问题出在您的客户端 JavaScript 中。

要在浏览器中显示图像数据，您最终必须使用 canvas 或 img HTML 元素。在应用程序中异步加载图像的最简单方法是将 DOM 中已存在的 img 元素的 src 属性更新为图像的地址，并让浏览器会为您处理加载。

但是，如果您想在将图像数据加载到 img 或 canvas 元素之前对其进行操作，我建议使用 FileReader API，而不是手动解析二进制文件。

此方法的关键步骤是在发出 get 请求时将响应数据类型设置为“blob”

blob 数据类型引用二进制图像文件，但允许您使用浏览器的内置File 接口(interface)。

下面的代码请求一个 Blob 形式的图像文件，然后将该 Blob 转换为 Base64 编码的数据 URL，您可以将其用作 img 元素的 src 属性或加载到 Canvas 。

var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.onload = function(event) {
fileToDataUrl(event.target.response, function(result){
            console.log(result);
    });
};
xhr.open('GET', "https://i.imgur.com/7VhSUEH.jpg", true);
xhr.send();


function fileToDataUrl(fileObj, callback) {
    var reader = new FileReader();
    reader.addEventListener("load", function() {
    console.log("result")
        callback(reader.result);
    }, false);
    reader.readAsDataURL(fileObj);
}