javascript - 清除vue 3中的输入文件

Question

我在 vue 3 中有这个 vue 组件

<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>

在我使用它的组件中:

<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
   }
 }
}

提交输入文件中的表单后，文件名仍然保留，如果我尝试再次上传相同的文件，它不会接受它。

如何清除输入的文件名？

Answer 1

解决方案非常简单:)

在文件输入中，我添加了另一个 prop fileModel(或者您可以使用提供 - 注入(inject)):

props: ['inputClass', 'fileModel']

然后当模型值变为空(重置)时观察变化，然后清除输入

const {fileModel} = toRefs(props)
watch(fileModel, (value) => {
    if(value === null) {
        fileInput.value.value = ''
    }
})