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

解決方案非常簡單:)

在文件輸入中，我添加了另一個道具 fileModel（或者您可以使用提供 - 注入）：

props: ['inputClass', 'fileModel']

然后觀察 model 值變為 null（復位）時的變化，然后清除輸入

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