使用$http从服务器下载原始文件并创建Blob对象。

Question

服务器上存储了一个带有文件的url。 该url为http://website.com/abc 我使用$http请求获取该url。

$http.get(url, { responseType: "arraybuffer" });

我想从这个对象创建Blob对象。我确定该对象的类型是png，因为在上传之前它有这个扩展名并且可以正确显示。

new Blob(result.data, {type: "image/png"});

我收到了一个消息：

构造“Blob”失败：第一个参数既不是数组，也没有索引属性。

从服务器http://website.com/abc以GET方式获取的响应在开发者控制台中看起来像：

ÿØÿàJFIFÿþ;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 60
ÿÛC





 ' .)10.)-,3:J>36F7,-@WAFLNRSR2>ZaZP`JQROÿÛC&&O5-5OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOÿÂÒ"ÿÄÿÄÿÚæå2ag\Ý#úDê3[Zdfc5±Ô¢¬æ)K<`¤l2¸ÊánYR±aA`Í%RÈfbz!¤tÞÑ-µd7ZªÀ[hz¨f¥>©cAV¬{3á R³F0  W>~c³"ðÈìøÖ²ÇBÙ³±+
½ò9tµ°õ

我尝试将Blob类型设置为application/octet-stream，并且在没有指定responseType的情况下进行$http.get。

如何创建正确的Blob文件？ 我需要Blob文件，以创建文件对象，该对象是实现逻辑的入口数据，以便使用模态框显示幻灯片中的文件。我已经为输入表单创建的File类型文件实现了逻辑 - 这是在上传到服务器之前需要完成的。现在，事实证明服务器不会向我返回相同的文件，而只会返回文件的URL，这导致想到要从URL转换为File，以避免在该逻辑中重复。

- changtung

---

似乎可以通过URL创建使用PDFJS和图像的逻辑... - changtung

“Failed to construct 'Blob': The 1st argument is not an array” 看起来是一个非常明确的错误信息！Blob 构造函数需要一个缓冲区数组作为第一个参数。 - Bergi

Answer 1

尝试

$http.get(url, { responseType: "blob" });

或者

// missing `[]` at `js` at Question
new Blob([result.data], {type: "image/png"});

注意XMLHttpRequest的responseType也可以设置为"blob"，请参见如何使用JavaScript从返回的二进制字符串构建PDF文件的Web服务

- guest271314