0

Tengo un formulario de tres pasos. En el primer paso tengo que subir una imagen al servidor como un File, pero de momento le paso la URL para que se me muestre la imagen, ya que si le paso un File me da error y no se me muestra.

El html del componente hijo es:

<div class="file_upload" v-show="!this.url">
            <input type="file" id="file-upload" accept="image/*" class="input_hidden" @change="getImageFromURL">
            <div class="select_img_container">
                <label class="file-upload-button">Upload Image</label>       
            </div>
        </div>
        <div class="file_uploaded" v-show="this.url">
            <img class="imagen" :key="url" :src="url" />
        </div>

El javascript del componente hijo es:

props:{
        defaultURL: File, 
    },
    data(){
        return{
            url: this.defaultURL,
            isOver: false,
            file: null,
            ALLOWED_TYPES: [],
            TYPE_TO_EXTENSION: {
                "img/png": ".png",
            },
        }
    },
methods:{
async getImageFromURL(e) {
            this.file = e.target.files[0]
            this.url = URL.createObjectURL(this.file)
            fetch(this.url).then(async (response) => {
                const contentType = response.headers.get("content-type");
                const blob = await response.blob();
                const fileblob = new File([blob], this.file, { contentType });
                if (blob) {
                    this.$emit("update:modelValue", this.url)
                } else {
                    this.url = null;
                }
            });
}

De momento paso un Blob al padre y se me muestra la imágen, con un File de me da error y no se carga la imágen.

El código del componente padre paso 1:

<g-image-drop v-model="url" :defaultURL="url"></g-image-drop>
{{ url }}

El codigo del componente padre paso 3:

<div class="foto">
   <img class="imagen" v-bind:src="url" :key="url" v-if="url">
</div>

Como podría pasarle directamente la imagen en formato File para que se me muestre, o bien, convertir el Blob en un File en el componente padre?

Muchas gracias, comunidad!

1
  • Bienvenido Char Play. Te recomiendo que te pases primero por el Centro de Ayuda para aprender como realizar una buena pregunta. Haz preguntas concretas y si tienes varios errores pregunta de uno en uno. Reforma la pregunta para que quede más claro cual es el problema y lo que has intentado para solucionarlo.
    – Fly
    el 26 ene. a las 8:34

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

Examina otras preguntas con la etiqueta o formula tu propia pregunta.