Tengo este componente vue en vue 3
<template> <input type="file" :class="inputClass" accept=".pdf" @input="onFileSelect" ref="fileInput"> </template> <script> import {ref} from "vue"; export default { name: "FileInput", props: { inputClass: String }, setup(props, {emit}) { const fileInput = ref(null) const onFileSelect = () => { const input = fileInput.value; const files = input.files; if(files && files[0]) { const reader = new FileReader; reader.onload = e => { emit('input', e.target.result); } reader.readAsDataURL(files[0]); } } return {fileInput, onFileSelect} } } </script>y en el componente donde lo uso:
<file-input input-class="form-control form-control-sm" v-model="document.doc_file" @input="getBase64File"/> setup() { const getBase64File = (file) => { document.value.doc_file = file } const document = ref({ // ... other fields doc_file: null, }) const resetDocumentModel = () => { for(let field in document.value) { document.value[field] = null } } }después de enviar el formulario en el archivo de entrada archivado, aún permanece el nombre del archivo y si intento cargar el mismo archivo nuevamente, no lo tomará.
¿Cómo borrar el nombre del archivo de entrada?
La solución fue muy sencilla :)
En la entrada del archivo, agregué otro modelo de archivo prop (o puede usar proporcionar - inyectar):
props: ['inputClass', 'fileModel']Luego observe los cambios cuando el valor del modelo se vuelve nulo (restablecer) y luego borre la entrada
const {fileModel} = toRefs(props) watch(fileModel, (value) => { if(value === null) { fileInput.value.value = '' } })