es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo volver a cargar la ruta de la imagen después de cargar el archivo de imagen en AWS S3?

¿Cómo volver a cargar la ruta de la imagen después de cargar el archivo de imagen en AWS S3?

15 Jul, 2023 Programación

En la página de perfil de usuario, mi módulo obtiene una imagen de la galería, la sube a AWS S3 y luego actualiza la imagen existente. Sin embargo, aunque la imagen ya se ha subido a AWS S3, la imagen de perfil del usuario no se vuelve a cargar en la pantalla. Una cosa extraña es que cuando activo algún otro evento (por ejemplo, se hace clic en un segmento u otro botón), la imagen subida se carga.
¿Cómo debo activar un evento para volver a cargar una imagen actualizada?

Ya he intentado activar eventos utilizando Injectable y Subject, pero no resolvieron este problema.
Además, ChangeDetectorRef no resolvió este problema.

(Ionic 5 Cordova / Angular)

// Código TypeScript:

import { UUID } from 'angular2-uuid';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';  

userImage: any;  

constructor(private platform: Platform,
    private changeRef: ChangeDetectorRef, 
    private camera: Camera, 
    private util: UtilService, 
    private events: EventsService, 
    private rcvEvents: EventsService ) { 
} 

openGallery() {
    const options: CameraOptions = {
      quality: 100, 
      targetWidth: 480, 
      targetHeight: 640, 
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
    }; 
    const uuid = UUID.UUID().toString();
    const uuid_file = uuid.replace(/-/g, "") + ".jpg"; 

    this.camera.getPicture(options).then((uri) => { 
      this.util.makeFileIntoBlob(uri, uuid_file).then((imageData:any) => {
        this.util.uploadAwsFile(imageData, 'user', uuid_file).then(res => { 
            const result = res['data'];  
            this.userImage = result['Location']; 
            }); 
        });  
    }).catch(err =>{ 
      this.util.presentToast(`${err}`, false, 'bottom', 1500); 
    });

} 

// HTML 
<img [src]="userImage" class='round-image' (click)="openGallery()">
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Un enfoque para desencadenar una recarga de la imagen de perfil de usuario actualizada sería utilizar el mecanismo de detección de cambios de Angular. Dado que el detector de cambios no detecta el cambio en la variable userImage después de que se actualiza, puedes desencadenar manualmente la detección de cambios después de actualizar la variable.

    Para hacer esto, puedes inyectar el servicio ChangeDetectorRef en el constructor de tu componente y llamar al método detectChanges() en él después de actualizar la variable userImage. Aquí tienes una versión actualizada de tu código Typescript que demuestra esto:

    import { UUID } from 'angular2-uuid';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';  
import { ChangeDetectorRef } from '@angular/core'; // Importar ChangeDetectorRef

userImage: any;  

constructor(private platform: Platform,   
    private changeRef: ChangeDetectorRef, // Inyectar ChangeDetectorRef
    private camera: Camera, 
    private util: UtilService, 
    private events: EventsService, 
    private rcvEvents: EventsService ) { 
} 

openGallery() {  
    const options: CameraOptions = {
      quality: 100, 
      targetWidth: 480, 
      targetHeight: 640, 
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
    }; 
    const uuid = UUID.UUID().toString();  
    const uuid_file = uuid.replace(/-/g, "") + ".jpg"; 

     this.camera.getPicture(options).then((uri) => { 
      this.util.makeFileIntoBlob(uri, uuid_file).then((imageData:any) => {
        this.util.uploadAwsFile(imageData, 'user', uuid_file).then(res => { 
            const result = res['data'];  
            this.userImage = result['Location'];
            this.changeRef.detectChanges(); // Desencadenar detección de cambios después de actualizar userImage
            }); 
        });  
    }).catch(err =>{ 
      this.util.presentToast(`${err}`, false, 'bottom', 1500); 
    });
  }

    Con este cambio, la imagen de perfil del usuario debería recargarse en la pantalla después de que el detector de cambios detecte el valor actualizado de la variable userImage.

Comments are closed.