blob 上的错误内容类型无法打开 img / 文件已损坏

Posted 2023-03-22

【中文标题】blob 上的错误内容类型无法打开 img / 文件已损坏

【英文标题】：wrong content type on blob cant open img / file is damaged

【发布时间】：2021-11-30 00:12:27

【问题描述】：

我正在尝试使用 JS Blob() 函数下载文件，但我无法打开它。由于我得到了一个文件列表，所以事先不清楚是什么类型，用户可以选择下载什么。 Mac 说，格式可能已损坏，无法打开该文件。

我创建一个 blob 的 cURL 响应是一个二进制字符串（至少我相信是这样，因为当我转储它时，你只会看到随机符号和字符，就像你用文本编辑器打开图像时一样）

这是Image code，因为我通过我的 cURL 的响应获得了它

这是我下载此图片的代码。

                var a;
            a = document.createElement('a');

            a.href = URL.createObjectURL(new Blob([JSON.stringify(response)]));

           // here i tried with and without JSON.stringify
           // also tried new Blob([JSON.stringify(response)],type:'image/jpeg') or with * instead of jpeg, nothing works. Does anybody happen to know what mistake i am doing?

            a.download = data.data.name;
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();

这几天一直在苦苦挣扎，感谢任何帮助。

当我（在 Mac 终端）执行以下命令时：

file test.jpeg

返回

test.jpeg: data

最好的问候

编辑：我的 php 代码

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "https://myapi.com/webapp/api/v1/document/id/" . $id . "/download");
curl_setopt($ch, CURLOPT_HTTPHEADER, array('AuthenticationToken:' . $token));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);


curl_close($ch);
echo $output;

【问题讨论】：

您能否提供响应的内容或它的外观示例？

如果你点击突出显示的“图像代码”并下载txt文件，那么你会看到文件的长内容，这是我唯一得到的东西

此链接崩溃

我现在添加了一个新链接，指向显示内容的 jsfiddle

您是否正确地尝试使用 Unicode 字符串传输二进制数据？

【参考方案1】：

您可以尝试将图像数据序列化为base64字符串并传递给客户端

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "https://myapi.com/webapp/api/v1/document/id/" . $id . "/download");
curl_setopt($ch, CURLOPT_HTTPHEADER, array("AuthenticationToken:" . $token));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);

$contentType = curl_getinfo($ch, CURLINFO_CONTENT_TYPE);

curl_close($ch);

$base64 = "data:/" . $contentType . ";base64," . base64_encode($output);

echo $base64;

在这种情况下，在您的客户端，您只需要像这样放置 href 的响应文本：

const a = document.createElement('a');
a.href = response;
a.download = data.data.name;
a.style.display = 'none';
document.body.appendChild(a);
a.click();

【讨论】：

我尝试使用内容类型并返回这里并得到结果。非常感谢安迪，真的！