javascript - Creating Blob object from raw file downloaded from server with $http. - Stack Overflow

admin管理员组

文章数量:1345193

On server there is url with files stored. Url is I do $http get on this url.

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

I want to create Blob object from this. I am sure that object is of type png, because it had this extension before upload and it shows properly.

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

I get message: Failed to construct 'Blob': The 1st argument is neither an array, nor does it have indexed properties.

Response from server GET in developer console looks like:

ÿØÿà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µ°õ

I tried to set Blob type to application/octet-stream and also do $http.get without specified responseType.

How can I create a proper Blob file? I need Blob File, to create File object which is an entry data to implemented logic to display files in slideshow with modals. I have implemented logic for files of type File, which were created by input forms - implementation was done for a need before uploading to server. Now it turns out that server doesn't return same files to me, but return only urls of files, which created an idea to convert from url to File in order to dont repeat in that logic.

On server there is url with files stored. Url is http://website./abc I do $http get on this url.

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

I want to create Blob object from this. I am sure that object is of type png, because it had this extension before upload and it shows properly.

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

I get message: Failed to construct 'Blob': The 1st argument is neither an array, nor does it have indexed properties.

Response from server http://website./abc GET in developer console looks like:

ÿØÿà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µ°õ

I tried to set Blob type to application/octet-stream and also do $http.get without specified responseType.

How can I create a proper Blob file? I need Blob File, to create File object which is an entry data to implemented logic to display files in slideshow with modals. I have implemented logic for files of type File, which were created by input forms - implementation was done for a need before uploading to server. Now it turns out that server doesn't return same files to me, but return only urls of files, which created an idea to convert from url to File in order to dont repeat in that logic.

• javascript
• angularjs
• file
• encoding

Share Improve this question Follow asked Oct 22, 2015 at 7:26 changtungchangtung 1,62422 gold badges1515 silver badges1919 bronze badges 2

• It seems that logic with PDFJS and Image can be created from url... – changtung Commented Oct 22, 2015 at 7:32
• "Failed to construct 'Blob': The 1st argument is not an array" seems to be a pretty explicit error message?! The Blob constructor takes an array of buffers. – Bergi Commented Oct 22, 2015 at 7:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Try

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

or

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

Note XMLHttpRequest responseType could also be set to "blob", see How to build PDF file from binary string returned from a web-service using javascript

本文标签： javascriptCreating Blob object from raw file downloaded from server with httpStack Overflow