ajax - 通过GET请求下载图片但获取 'application/octet-stream'

Question

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

路线工作正常，在开发人员工具中查看，我可以按预期正确看到图像预览 - 见下文:

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

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

数据:image/png;base64，iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAYAAADOtM0JAA...

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

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

这个“八位字节流”不能在浏览器中作为图像(标签)显示，所以它对我来说没有用。

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

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);

    })
}

Answer 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。