¿Cómo puedo convertir una imagen en base64 a un archivo, similar a un tipo de archivo de Entrada, en un frontend de vue?

11 Jun, 2023 Programación 0

Mi aplicación tiene una ventana de edición, donde un usuario puede seleccionar y subir una imagen de perfil.

Utilizo el siguiente método:

onFileChange(e){
  this.selectedFile = e.target.files[0];
  console.log(this.selectedFile);
  this.url = URL.createObjectURL(this.selectedFile);
}

El archivo this.selectedFile se subirá al backend. Esto funciona como una maravilla.

La consola refleja el archivo cargado como:

File {name: 'IMG_6736.jpg', lastModified: 1529420030000, lastModifiedDate: Tue Jun 19 2018 16:53:50 GMT+0200 (Central European Summer Time), webkitRelativePath: '', size: 1307592, …}
blob:http://localhost:8000/deaf3008-e989-4db5-8ee4-41e7cc618916

Ahora he creado y agregado un componente de croppie a la página. Croppie genera un resultado de imagen recortada en formato base64.

El plan es asignar el archivo de croppie también a this.selectedFile y procesarlo como el archivo del campo de entrada descrito anteriormente.

Entonces intento convertirlo y enviar el archivo resultante al componente principal. Esto también funciona bien, excepto por el hecho de que no es un archivo que envío hacia arriba con $emit…

setImage(){
   this.croppie.result({
      type: 'blob',
      size: 'viewport'
   })
  .then(blob =>{
     const file = new File([blob], "Nombre de archivo", {type: blob.type})
     this.$emit('updateImage', file);
  });
}

En el componente principal se procesa por:

freshImage(freshImg){
   const url = URL.createObjectURL(freshImg); 
   fetch(url).then(file => {
      console.log(file)
      console.log(url);
      //this.selectedFile = file;
   })
}

Ahora la consola muestra:

[object Response]
blob:http://localhost:8000/a4e212c3-d9e7-48b7-bd0b-cb99eadeebc9

¿Hay alguien que pueda ayudarme a sacar el archivo del objeto de respuesta?

davy.ai

June 11, 2023 at 8:15 pm

Como modelo de lenguaje IA, no puedo probar el código proporcionado, pero al observar los fragmentos de código, parece que la función freshImage está intentando buscar el parámetro freshImg desde su URL. En lugar de hacer esto, puede asignar directamente el parámetro freshImg a this.selectedFile después de emitirlo desde el componente hijo.

Entonces, la función actualizada setImage lucirá así:

setImage(){
    this.croppie.result({
        type:'blob',
        size:'viewport'
    })
    .then(blob =>{
        const file = new File([blob], "File name", {type: blob.type})
        this.$emit('updateImage', file);
    });
}

Y la función actualizada del componente padre lucirá así:

freshImage(freshImg){  
    this.selectedFile = freshImg;
    console.log(this.selectedFile);
}

De esta manera, puede asignar directamente el parámetro freshImg a this.selectedFile y utilizarlo en su aplicación.

Answer

davy.ai

June 11, 2023 at 8:15 pm
Como modelo de lenguaje IA, no puedo probar el código proporcionado, pero al observar los fragmentos de código, parece que la función freshImage está intentando buscar el parámetro freshImg desde su URL. En lugar de hacer esto, puede asignar directamente el parámetro freshImg a this.selectedFile después de emitirlo desde el componente hijo.

Entonces, la función actualizada setImage lucirá así:
```
setImage(){
    this.croppie.result({
        type:'blob',
        size:'viewport'
    })
    .then(blob =>{
        const file = new File([blob], "File name", {type: blob.type})
        this.$emit('updateImage', file);
    });
}
```
Y la función actualizada del componente padre lucirá así:
```
freshImage(freshImg){  
    this.selectedFile = freshImg;
    console.log(this.selectedFile);
}
```
De esta manera, puede asignar directamente el parámetro freshImg a this.selectedFile y utilizarlo en su aplicación.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo convertir una imagen en base64 a un archivo, similar a un tipo de archivo de Entrada, en un frontend de vue?

Answer

davy.ai