通过 GET 请求下载图像但获取“应用程序/八位字节流”答案

【问题标题】：Downloading image via GET request but obtaining 'application/octet-stream'通过 GET 请求下载图像但获取“应用程序/八位字节流”
【发布时间】：2022-01-07 05:18:48
【问题描述】：

我在后端服务器中创建了一个 GET 路由，它根据 GET 查询返回图像。

路线工作正常，在开发者工具中我可以看到正确的图像预览 - 见下文：

当我通过 Postman 发送此请求时，它也可以正常工作并正确预览图像！

通过开发者工具获取的图片数据URI是一个功能有效的URI，如下：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAYAAADOtM0JAA...

问题是，当我对此 GET 路由发出 Ajax 请求并处理结果时，我得到的 URI 如下：

data:application/octet-stream;base64,77+9UE5HDQoaCgAAAA1JSERSAAAASwAAAGQIBg...

这个 'octet-stream' 不能在浏览器中显示为图像（标签），所以对我来说没用。

我用于在我的应用程序中处理此请求的代码如下（简化）。你能帮帮我吗？

export const userGetProfilePhoto = async () => {

    let ajaxReturn = await $.ajax({
        url: `/getUserPhoto`,
        type: 'get',
        headers: {
        },
        processData: false,
        contentType: false,
        success: function () {
            console.log('userGetProfilePhoto returned success');
        },
        error: function (xhr, status) {
            console.error('userGetProfilePhoto returned error');
        },
        complete: function (xhr, status) {
        }
    });

    let binaryData = [];
    binaryData.push(ajaxReturn);
    let blob = new Blob(binaryData, { type: "" });

    return new Promise((resolve, reject) => {
        var a = new FileReader();
        a.onload = function (e) {
            resolve((e.target.result));
        };
        a.readAsDataURL(blob);

    })
}

【问题讨论】：

标签： ajax download blob uri filereader

【解决方案1】：

迟到总比没有好，下面是针对这种情况的功能性 jQuery 请求：



export const userGetProfilePhoto = async (userUID, userToken) => {
    console.debug('userGetProfilePhoto()');

    let ajaxReturn = await $.ajax({
        url: `/storage/getUserPhoto`,
        type: 'get',
        cache: true,
        headers: {  },
        contentType: 'application/json',
        data: { userUID }, //Query specific user picture
        xhrFields: {
            responseType: 'blob' //for arrayBuffer receiving
        },
        success: function () {
            console.log('userGetProfilePhoto returned success');
        },
        error: function (xhr, status) {
            console.error('userGetProfilePhoto returned error');
        },
        complete: function (xhr, status) {
        }
    });

    let blob = new Blob([ajaxReturn], {});

    return new Promise((resolve, reject) => {
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            resolve((e.target.result));
        };
        fileReader.readAsDataURL(blob);
    })
}

只需将“blob”添加到 xhr responseType。

【讨论】：