Görüntü Verisini Ayıklamadan Yanıt: Angular2

Question

Yanıt, görüntü verisine sahip ancak yanıtı ayıklayamıyorum.

MÜŞTERİ Kodunuzu

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

SUNUCU Kodunuzu

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

[DÜZENLEME] - Ben CustomXhr kullanmak için kodumu adapte ama gelmiş hiçbir veri ile boş bir damla olsun ancak.

ÖZEL XHR Kodunuzu

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

BOOTSTRAP Kodunuzu ihracat fonksiyonu ana (initialHmrState ?: herhangi): Promise {

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

Ne arıyoruz arrayBuffer(). maalesef arrayBuffer() henüz beta.13 itibariyle uygulanmadı,

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

Ama: Sizin kod olacak. Eğer Angular2 talep üzerine responseType özelliğini ayarlayın olamaz çünkü

yerine XMLHttpRequest kullanabilirsiniz Aslında 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

, o anda o kadar basit değil (bunun için bekleyen bir PR var).

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); 
    } 
} 

Sonra bir Blog içine müdahale yükü kaydırmak için gereken: Temel xhr nesnesinde blob için responseType ayarlamak için aşağıda tarif edildiği gibi

bir çözüm olarak, Angular2 arasında BrowserXhr sınıfı genişletmek için gereken nesne:

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}); 
     (...) 
     }); 
} 

bu plunkr bakınız: http://plnkr.co/edit/2ZodNBmv8OVj3LZSrozG?p=preview: Bu plunkr bakınız.

fazla ayrıntı için bu soruya bakın:

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