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!