处理从服务器返回的图像二进制文件

Question

服务器正在通过API调用向我发送图像。 我不确定如何将其转换为base64并显示为image src。 FileReader的readAsDataURI表示它不是Blob类型。 但是，浏览器的网络面板确实可以正确预览图像。 服务器未在响应中发送“ Content-Type”标头，这可能是问题吗？ 响应的屏幕截图

Answer 1

如果chrome dev工具正确显示图像，则说明它是有效的Blob文件。 您只需要在请求中设置响应类型，还可以使用createObjectURL生成图像

这是一个示例片段

    function response(e) {
        var urlCreator = window.URL || window.webkitURL;
        console.log(this.response);
        var imageUrl = urlCreator.createObjectURL(this.response);
        document.querySelector("#image").src = imageUrl;
        }
    function GetImageBlob(){
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "https://secret/upload/IMG_1_201810220930_1.jpg");
        //Set Header if is required by the api
        xhr.setRequestHeader("Authorization","Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NDAyMTg5MDYsImlzcyI6Imh0dHA6Ly9yc3YtZGV2LmJsb3RvY29sLnRlY2gvYWRtaW4iLCJhdWQiOiJodHRwOi8vcnN2LWRldi5ibG90b2NvbC50ZWNoL2FkbWluIn0.YTHKhrl05PWDWCkHB1Nw7yW5166NiyGG3kZ_7SWfT1I");
        xhr.responseType = "blob";
        xhr.onload = response;
        xhr.send();
    }
    GetImageBlob();