각도 2의 Firebase 저장소 - 업로드시 이미지 미리보기

Question

uploadTask가 성공적으로 수행 된 후에 업로드 된 img를 표시하려하지만 비동기 적으로로드되어 있기 때문에보기가 업로드가 완료되기 전에 표시하려고 시도합니다.

이

은 방법 :

upload(value){ 
    let file = value.target.files[0]; 
    let storageRef = firebase.storage().ref('noticias/' + file.name); 
    let uploadTask = storageRef.put(file); 

    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
     function(snapshot) { 
     let progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100; 
     console.log('Upload is ' + progress + '% done'); 
     switch (snapshot.state) { 
      case firebase.storage.TaskState.PAUSED: // or 'paused' 
      console.log('Upload is paused'); 
      break; 
      case firebase.storage.TaskState.RUNNING: // or 'running' 
      console.log('Upload is running'); 
      break; 
     } 
     }, function(error) { 
     switch (error) { 
     case 'storage/unauthorized': 
      break; 

     case 'storage/canceled': 
      break; 

     case 'storage/unknown': 
      break; 
     } 
    }, function() { 
     // Upload completed successfully, now we can get the download URL 
     let downloadURL = uploadTask.snapshot.downloadURL; 
     console.log('Upload done!'); 
    }); 

    storageRef.getDownloadURL().then(url => this.imgUrl = url); 
    this.uploadedImg = true; 
    } 

그리고 이것은이다 : 방법의

<img *ngIf="uploadedImg" [src]="imgUrl" /> 

마지막 두 줄은 부하 너무 일찍 방법들입니다. 나는 또한 그것들을 성공 함수 내부로 옮기려고 노력했다. 문제는 내가 거기로 이동하면 this 더 이상 클래스를 말하기 때문에 내가보기에서 값을 변경할 수 없다는 것입니다.

Answer 1

this에 대한 참조를 잃는 것은 자바 스크립트에서 흔히 발생하는 문제이며이를 추적하는 간단한 패턴이 있습니다.

upload(value){ 
    let that = this; 
    let file = value.target.files[0]; 

지금 that 항상 원래 this를 가리키는 것이고, 다음은 예상대로 작동합니다 : 당신은 단지 시작에이 성공 함수 내 라인 이동에 대한 옳은 일하고

}, function() { 
    // Upload completed successfully, now we can get the download URL 
    let downloadURL = uploadTask.snapshot.downloadURL; 
    console.log('Upload done!'); 
    // Using original `this` 
    storageRef.getDownloadURL().then(url => that.imgUrl = url); 
    that.uploadedImg = true; 
});