...
La otra forma, que no es la recomendable, es utilizar el componente modificado. Hemos implementado este componente, que es el mismo añadiendo una línea de código para indicarle que, después de subir el archivo con el uploader personalizado, se limpie su estado, pues ya lo habremos obtenido, y nos permitirá seleccionar otro: CustomFileUploader.vue. Este componente, al añadir sólo una línea de código, se utiliza exactamente igual que el original de Primevue (versión 2.4.0). Insistimos en que esta forma no es la recomendable, lo más adecuado es utilizar la primera forma, sólo incluimos ésta por si hay una casuística muy particular para la que sea necesaria.
Ejemplo con v-if y lectura del archivo en base 64
En este ejemplo guardamos el archivo subido en un objeto que tenemos definido como variable en el data de nuestro componente. Guardamos el nombre del archivo, el tipo, y el archivo codificado en base 64. No incluimos el envío de este, pero se haría igual que un POST normal, correspondiéndose con un DTO que tengamos definido en el backend. El componente de ejemplo es este:
| Bloque de código | ||
|---|---|---|
| ||
<template>
<div>
<FileUpload
v-if="!hayArchivo"
name="contenido[]"
mode="basic"
:auto="true"
:customUpload="true"
@uploader="myUploader"
/>
<div v-else>
<Button
icon="pi pi-times"
class="p-button-rounded p-button-danger p-button-outlined"
@click="borrarArchivo"
/>
<span style="margin-left: 20px">{{ file.name }} </span>
</div>
</div>
</template>
<script>
import FileUpload from "primevue/fileupload";
import Button from "primevue/button";
export default {
data() {
return {
hayArchivo: false,
file: {},
};
},
methods: {
myUploader(event) {
if (typeof event.files[0] != "undefined") {
this.hayArchivo = true;
let eventFile = event.files[0];
// Guardamos el nombre y el tipo del archivo
this.file.name = eventFile.name;
this.file.typemyme = eventFile.type;
// Leemos el archivo y lo guardamos
let reader = new FileReader();
reader.onloadend = () => {
console.log(this);
this.file.base64 = reader.result;
};
reader.readAsDataURL(eventFile);
} else {
// Tratamiento de error
console.log("Error en la subida del archivo");
}
},
borrarArchivo() {
this.hayArchivo = false;
this.file = {};
},
},
components: { FileUpload, Button },
};
</script> |