前端上传PNG图片时服务器识别为application/octet-stream的解决办法

安全阿岳

2026-7-11

问题

我有一个正确的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}`
);

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

接着通过fetch提交该实例：

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

开发者工具显示请求已正确发送为multipart/form-data请求，带有相应分隔符，Blob的type属性正确为image/png，检查请求时，multipart/form-data payload中img属性的Content-Type也为image/png。但接收服务器始终将上传的img文件识别为application/octet-stream类型。

如何确保服务器感知到的MIME类型确实为image/png？

解决方案

修正Blob的二进制数据构造方式
当前用atob得到二进制字符串后直接传入Blob，会导致数据编码异常，服务器无法正确识别文件类型。正确做法是将二进制字符串转换为Uint8Array再创建Blob：
```
const imgAsBinaryString = atob(base64StringWithoutPrefix);
const uint8Array = new Uint8Array(imgAsBinaryString.length);
for (let i = 0; i < imgAsBinaryString.length; i++) {
    uint8Array[i] = imgAsBinaryString.charCodeAt(i);
}
const blob = new Blob([uint8Array], {type: `image/${imageSuffix}`});
```
这种方式能保证Blob的二进制数据格式完全符合PNG文件规范，服务器既可以通过请求头的Content-Type，也可以通过文件内容识别出正确的MIME类型。
确认文件名后缀的准确性
部分服务器会优先通过文件名后缀推断MIME类型，确保imageSuffix变量确实是png，且FormData中设置的文件名img.${imageSuffix}后缀正确。可以直接硬编码文件名img.png测试，排除变量取值错误的可能。
排查服务器端解析逻辑
有些服务器框架或中间件会默认将无法识别的文件标记为application/octet-stream，即使请求头的Content-Type正确。需要检查服务器端是否正确读取了multipart字段的Content-Type属性：
- 比如使用Node.js + Express + Multer时，确保没有配置强制覆盖MIME类型的选项；
- 若用Python Django，检查request.FILES中文件的content_type是否被正确解析，而非依赖默认的文件类型推断。

内容的提问来源于stack exchange，提问作者DevelJoe