Para adjuntar archivos, disponemos del componente FileUpload de Primevue (documentación). Podemos ver los diferentes modos y propiedades que tiene. Por defecto, su funcionamiento al subir el archivo es hacer un POST a la url que le indiquemos, pero en nuestro caso, como tendremos servicios sin estado, es probable que queramos mandar el archivo al backend junto con los datos de un formulario, en un solo paso. Para ello, podemos personalizar su comportamiento, indicando :customUpload="true" e implementando el handler del evento @uploader. Podemos, por ejemplo, guardar el archivo en nuestro componente Vue, simplemente teniendo @uploader="myUploader" y:
methods: {
myUploader(event) {
this.archivos = event.files;
}
}
Para esto, nos interesa indicar :auto="true", para que directamente al seleccionar el archivo se ejecute esta función. El problema de esto es que al seleccionar un archivo, si le volvemos a clickar para seleccionar otro y sustituirlo no hace nada, porque el componente interpreta que ya ha subido un archivo. Para evitar esto, 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: 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).