Угловое 2 загруженное изображение не сохраняется на странице после перезагрузки

Question

Я создал компонент для загрузки изображения профиля. Предварительный просмотр, загрузка, удаление, изменение размера все работает нормально, но как только я перезагружаю страницу, моя фотография не сохраняется на странице. Я использую GET API для загрузки загруженного изображения при перезагрузке, который работает нормально (я перекрестно проверил его в почтальоне).

Ниже закачивать-фото услуг:

getPicture(userId = 'Current') { 
    console.log(userId); 

    let headers = new Headers(); 
    let data = new FormData(); 

    headers.append('authorization', 'Bearer ' + localStorage.getItem('id_token')); 
    headers.append('Access-Control-Allow-Origin', '*'); 
    const url = 'http://docker-hip.cs.upb.de:5000/api/Users/'+ userId+ '/picture'; 

    return this.http.get(url, {headers}) 
     .toPromise() 
     .then((response: any) => {return(response)}) 
     .catch(this.handleError); 
    } 

    public uploadPicture(fileToUpload: any, userId = 'Current') { 
    let headers = new Headers(); 
    let data = new FormData(); 
    data.append('file', fileToUpload); 

    headers.append('authorization', 'Bearer ' + localStorage.getItem('id_token')); 
    headers.append('Access-Control-Allow-Origin', '*'); 

    const url = 'http://docker-hip.cs.upb.de:5000/api/Users/' + userId + '/picture'; 

    return this.http.post(url, data, {headers}) 
     .toPromise() 
     .then((response: any) => {return(response)}) 
     .catch(this.handleError); 
    } 

Вот закачивать-изображение компонента:

ngOnInit(): void { 
    const urls = this.route.snapshot.url; 
    const urlSegment = urls.shift(); 
    // the user is in the admin view if the url starts with 'admin': 
    if (urlSegment.path === 'admin') { 
     // get the user id from the last part of the url: 
     this.userId = urls.pop().path; 
    } else { 
     this.userId = 'Current'; 
    } 

    this.userService.getPicture() 
    .then(response => { 
     console.log(typeof(response)); 
     return response; 
    }) 
    .catch(this.displayError) 

    console.log(this.file_srcs); 

    if(this.fileCount > 0) 
    { 
     this.previewImage(this.fileToUpload) 
    } 

    } 

    uploadPicture(): void { 
    let fi = this.fileInput.nativeElement; 

    if (fi.files && fi.files[0]) { 
     console.log(fi.files[0]); 
     this.fileToUpload = fi.files[0]; 
     this.userService.uploadPicture(this.fileToUpload, this.userId) 
     .then(response => console.log('Image uploaded successfully!')) 
     .catch(this.displayError); 
    } 
    } 

    increaseCount() 
    { 
    this.fileCount = this.file_srcs.length+1; 
    this.isUpload = false; 
    this.isRemoved = false; 
    console.log(this.fileCount); 
    } 

    previewImage(fileInput: any) { 
    this.fileToUpload = <Array<File>> fileInput.files; 
    console.log(this.fileToUpload) 
    for (var i = 0; i < fileInput.files.length; i++) { 
     this.files.push(fileInput.files[i]); 
     console.log(fileInput.files[i]) 

     var img = document.createElement("img"); 
     img.src = window.URL.createObjectURL(fileInput.files[i]); 
     let reader = new FileReader(); 
     reader.addEventListener("load", (event) => { 
     img.src = reader.result; 

     this.file_srcs.push(img.src); 
     }, false); 
     reader.readAsDataURL(fileInput.files[i]); 
     this.isUpload = true; 
     this.uploadPicture(); 
    } 
    } 

Вот HTML для компонента загрузки-изображения:

<div> 
    <md-card class="Image"> 
    <div *ngFor = "let file_src of file_srcs"> 
     <img class = "uploadedImage" src="{{ file_src }}" alt="" /> 
    </div> 
    </md-card>    
    <input id = "uploadedFile" class = "uploadButton" type="file" #fileInput (change) = "increaseCount()"/> 
    <button md-raised-button color="primary" [disabled] = "fileCount == 0 || isUpload" class="uploadButton" (click)="previewImage(fileInput)">Upload Picture</button> 
    <button md-raised-button color="primary" [disabled] = "fileCount == 0 || isRemoved" class="uploadButton" (click)="removePicture()">Remove Picture</button> 
</div> 

Я попытался вызов такой же функции previewImage в ngOnInit для рендеринга изображения в пользовательском интерфейсе, но я не знаю, какой параметр я должен пройти t о. Может кому-то помочь.

Answer 1

В ngOnInit, этот код, кажется, отвечает

this.userService.getPicture() 
.then(response => { 
    console.log(typeof(response)); 
    return response; 
}) 
.catch(this.displayError) 
// You seem to assume that at this point the images are loaded 
// which is not the case because the promise will take some time 
// to be resolved but the next line will be executed immediately 
// before the promise is resolved so you will always have this line 
// output an empty array "[]" 
console.log(this.file_srcs); 

if(this.fileCount > 0) 
{ 
    this.previewImage(this.fileToUpload) 
} 

Вместо этого вы должны переместить this.previewImage вызовы в .then() из this.userService.getPicture, может быть что-то вдоль линий этого

this.userService.getPicture() 
.then(response => { 
    //You will probably need to fill this.file_srcs with data from response 
    console.log(this.file_srcs); 
    if(this.fileCount > 0) 
    { 
     this.previewImage(this.fileToUpload) 
    } 
    console.log(typeof(response)); 
    return response; 
}) 
.catch(this.displayError)