Bilddaten aus der Antwort extrahieren: Angular2

Question

Die Antwort enthält die Bilddaten, aber ich kann sie nicht aus der Antwort extrahieren.

CLIENT CODE-

download() { 
    this._http.get('http://localhost:9000/download/' + this._fileid) 
    .subscribe(
    data => { 
     this.image = data; 
    }, 
    err => console.log('Error is..:' + err) 
    ); 
} 

SERVER CODE-

app.get('/download/:fileid', function(req, res) { 
    var id = req.params.fileid; 
    res.set('Content-Type', 'image/jpeg'); 
    gfs.createReadStream({_id: id}).pipe(res); 
}); 

[EDIT] - Ich habe meinen Code zu verwenden CustomXhr angepasst, aber aber ich bekomme einen leeren Blob ohne Daten.

CUSTOM XHR CODE-

@Injectable() 
export class CustomBrowserXhr extends BrowserXhr { 
    build(): any { 
    let xhr = super.build(); 
    xhr.responseType = "blob"; 
    return <any>(xhr); 
    } 
} 

BOOTSTRAP CODE- Exportfunktion main (initialHmrState ?: vorhanden): Versprechen {

return bootstrap(App, [ 
    ...ENV_PROVIDERS, 
    ...PROVIDERS, 
    ...DIRECTIVES, 
    ...PIPES, 
    ...APP_PROVIDERS, 
    provide(BrowserXhr, { useClass: CustomBrowserXhr }) 
    ]) 
    .catch(err => console.error(err)); 

HTTP REQUEST

download() { 
    this._http.get('http://localhost:9000/download/' + this._fileid) 
     .toPromise() 
     .then(res => { 
     if (res.headers.get("Content-Type").startsWith("image/")) { 
      var blob = new Blob([new Uint8Array(res._body)], { 
       type: res.headers.get("Content-Type") 
      }); 
      var urlCreator = window.URL; 
      var url = urlCreator.createObjectURL(blob); 
      console.log(url); 
      this.image = url; 
     } 
     }) 
    } 

Answer 1

Was Sie suchen ist arrayBuffer(). Ihr Code wird sein:

download() { 
    this._http.get('http://localhost:9000/download/' + this._fileid) 
    .subscribe(
    data => { 
     this.image = data.arrayBuffer(); 
    }, 
    err => console.log('Error is..:' + err) 
    ); 
} 

Aber leider ist arrayBuffer() noch nicht ab beta.13 umgesetzt.

Sie stattdessen XMLHttpRequest verwenden könnte, Here is a plunker

getImage(url:string){ 
return Observable.create(observer=>{ 
    let req = new XMLHttpRequest(); 
    req.open('get',url); 
    req.responseType = "arraybuffer"; 
    req.onreadystatechange = function() { 
    if (req.readyState == 4 && req.status == 200) { 
     observer.next(req.response); 
     observer.complete(); 
    } 
    }; 
    req.send(); 
}); 
} 

Answer 2

In der Tat ist es im Moment nicht so einfach ist, da Sie nicht die responseType Eigenschaft auf Wunsch mit Angular2 (es ein anhängiges PR für diesen Satz kann).

Als Abhilfe können, benötigen Sie die BrowserXhr Klasse von Angular2 zu verlängern, wie unten beschrieben, um die responseType-blob auf dem darunterliegenden xhr Objekt zu setzen:

import {Injectable} from 'angular2/core'; 
import {BrowserXhr} from 'angular2/http'; 

@Injectable() 
export class CustomBrowserXhr extends BrowserXhr { 
    constructor() {} 
    build(): any { 
    let xhr = super.build(); 
    xhr.responseType = "blob"; 
    return <any>(xhr); 
    } 
} 

Dann Sie die Antwort Nutzlast in eine Blog wickeln müssen Objekt:

downloadFile() { 
    this.http.get(
    this.http.get(
     'https://mapapi.apispark.net/v1/images/sparky_right.png') 
    .subscribe(
     (response) => { 
     var mediaType = 'image/png'; 
     var blob = new Blob([response._body], {type: mediaType}); 
     (...) 
     }); 
} 

dieses plunkr sehen: Siehe dieses plunkr: http://plnkr.co/edit/2ZodNBmv8OVj3LZSrozG?p=preview.

Siehe diese Frage für weitere Informationen:

• Angular 2 download PDF from API and Display it in View