从 FormData 实例中的 base64 编码的 png 图像生成的 Blob 在服务器端被识别为应用程序/八位字节流

Question

好吧，我有一个正确的、base64 编码的 png 图像，我将其转换为 Blob：

const match = imgBase64String.match(/^data:image\/(\w+);base64,/);

if (!match) {

    throw new Error("Failed to decode base64-string.");

}

const imageSuffix = match[1];
const base64StringWithoutPrefix = imgBase64String.replace(
    /^data:image\/\w+;base64,/,
    ''
);
const imgAsBinaryString = atob(base64StringWithoutPrefix);

const blob = new Blob(
    [imgAsBinaryString],
    {type: `image/${imageSuffix}`}
);

然后，我将此数据与附加键值对一起附加到 FormData 实例中，如下所示：

const formDataPayload = new FormData();
formDataPayload.append(
    'img',
    blob,
    `img.${imageSuffix}`
);

formDayaPayload.append(
    'key',
    'value'
);

然后我使用以下方式提交实例：

fetch(
    'https://example.org/my-endpoint',
    {
        method : 'POST',
        mode   : 'same-origin',
        cache  : 'no-cache',
        body: formDataPayload
    }
);

开发工具显示请求已正确发送为

multipart/form-data

请求，具有相应的边界，并且

type

的

blob

属性是正确的

image/png

。检查发送的请求时，开发工具中

Content-Type

负载的

img

属性的

multipart/form-data

也是

image/png

。问题是接收服务器始终仍将上传的

img

文件检测为类型为

application/octet-stream

。

如何确保服务器感知到的 MIME 类型确实是

image/png

？

Answer 1

为了确保服务器正确识别您上传文件的 MIME 类型，您应该在创建

Uint8Array

之前将 base64 字符串转换为

Blob

。

function base64ToUint8Array(base64) {
    var binaryString = atob(base64);
    var bytes = new Uint8Array(binaryString.length);
    for (var i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes;
}

const match = imgBase64String.match(/^data:image\/(\w+);base64,/);

if (!match) {
    throw new Error("Failed to decode base64-string.");
}

const imageSuffix = match[1];
const base64StringWithoutPrefix = imgBase64String.replace(/^data:image\/\w+;base64,/, '');
const uint8Array = base64ToUint8Array(base64StringWithoutPrefix);

const blob = new Blob([uint8Array], {type: `image/${imageSuffix}`});

const formDataPayload = new FormData();
formDataPayload.append('img', blob, `img.${imageSuffix}`);
formDataPayload.append('key', 'value');

fetch('https://example.org/my-endpoint', {
    method : 'POST',
    mode   : 'same-origin',
    cache  : 'no-cache',
    body: formDataPayload
});

希望这有帮助！

Answer 2

看到this后，我找到了一个可行的解决方案，如果我将base64字符串转换为BLOB，然后将该BLOB转换为File实例。

由于在链接问题的评论中提到在应用程序中获取 dataURL 存在风险，我遇到了 this 从你的 base64 字符串生成 BLOB，而不依赖于

fetch

，最终导致服务器端正确的 mime 类型识别。