重新加载

Question

我已经为Uploading profile picture创建了组件。图像预览，上传，删除，调整大小一切正常，但一旦我重新加载页面，我的图片不会持续存在页面上。我正在使用GET API在重新加载时获取上传的图像，这很正常（我已经在postman中对它进行了交叉检查）。

以下是上传图片服务：

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

这是upload-picture组件：

 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>

我尝试在ngOnInit中调用相同的previewImage函数来在UI上渲染图像，但我不知道我将传递给它的参数。有人可以帮忙。

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()的{​​{1}}，这可能与此类似

this.userService.getPicture