VueJS文件上传字段无法重置

Question

在我的 vuejs 应用程序中，我有一个模式可以通过文件上传插入一些用户数据。

当用户成功上传任何内容时，我应该能够清除所有表单字段一次。

除了文件上传字段外，我的所有字段都被重置了。

它将保持原样。

在我的 form.vue 中，我有

用于文件上传

<div class="mb-1">
            <dashboard-input-label
              identifier="document"
              :settings="{ help: true, helpDirection: 'left' }"
            >
              Upload document
              <template slot="helpText">
                Maximum filesize is 5 MB. The default allowed file extensions
                are: pdf, jpeg and png.
              </template>
            </dashboard-input-label>
            <validator-v2
              :identifier="identifier"
              name="document_file"
              :rules="{ required: { message: 'Document is required.' } }"
            >
              <custom-file-upload
                ref="documentDocument"
                v-model="documentFile"
                :max-upload-file-size="5"
                name="document_file"
              ></custom-file-upload>
            </validator-v2>
          </div>

下面是我的按钮

<loading-button ref="submitBtn" size="normal">
              Save & Add new
            </loading-button>

这是我的 submitBtn 方法，

storeDocumentAndAddNew() {
      this.isAddNew = true
      const loader = this.$refs.submitBtn
      this.storeDocument(loader)
    },

对于字段重置，我有以下内容，

reset() {
      this.documentName= null
      this.dateOfIssue= null
      this.expiryDate= null
      this.documentNumber = null
      this.doesNotHaveDocumentNumber = false
      this.doesNotExpire = false
      this.documentFile = null
      this.doesOptIn = false
      this.isAddNew = false
      this.documentFile = ''
      this.$refs.documentDocument.value = null
    },

点击提交后，除此文件上传字段外，每个字段都会重置。

以下是我的custom-file-upload.vue组件

<template>
    <div>

        <div class="flex items-center flex-wrap">

            <div @click="selectFile" class="flex items-center cursor-pointer w-full form-input custom-file-upload ">

                <p class="flex justify-between items-center w-full overflow-hidden">
                    <span class="font-regular text-base flex items-center justify-center">
                        <span v-if="filename !== null">{{ filename | limitString }} </span>
                        <span class="cs--file-upload-current-file overflow-hidden inline-block" v-else><slot
                            name="currentFile"></slot></span>
                    </span>

                    <span class="text-certstyle-text-light ">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline
                            points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
                    </span>

                </p>

                <input @change="showFileName" ref="fileInput" type="file" :name="name">
                <div class="flex flex-col fixed top-0 right-0 z-50">
                    <toastr-alert @hidden="resetToastrMessage" v-if="message !== ''" :message="message"
                                  :type="type"></toastr-alert>
                </div>
            </div>
        </div>

    </div>

</template>

即使我已经使用过，this.$refs.documentDocument.value = null 它也没有清除我的文件上传字段....

更新

我使用了 @wendt88 的 答案，然后文件被删除了。但是之前上传的文档名称将保留在那里。例如，如果我尝试上传一个名为 dummy.pdf 的文档，即使成功后它也会显示 dummy.pdf 文本提交...

现在我的重置看起来像这样，

reset() {
      this.documentName= null
      this.dateOfIssue= null
      this.expiryDate= null
      this.documentNumber = null
      this.doesNotHaveDocumentNumber = false
      this.doesNotExpire = false
      this.documentFile = null
      this.doesOptIn = false
      this.isAddNew = false
      this.$refs.documentDocument.$refs.fileInput.value = null
    },

以下是我的完整custom-file-upload.vue

<template>
    <div>

        <div class="flex items-center flex-wrap">

            <div @click="selectFile" class="flex items-center cursor-pointer w-full form-input custom-file-upload ">

                <p class="flex justify-between items-center w-full overflow-hidden">
                    <span class="font-regular text-base flex items-center justify-center">
                        <span v-if="filename !== null">{{ filename | limitString }} </span>
                        <span class="cs--file-upload-current-file overflow-hidden inline-block" v-else><slot
                            name="currentFile"></slot></span>
                    </span>

                    <span class="text-certstyle-text-light ">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline
                            points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
                    </span>

                </p>

                <input @change="showFileName" ref="fileInput" type="file" :name="name">
                <div class="flex flex-col fixed top-0 right-0 z-50">
                    <toastr-alert @hidden="resetToastrMessage" v-if="message !== ''" :message="message"
                                  :type="type"></toastr-alert>
                </div>
            </div>
        </div>

    </div>

</template>
<style lang="scss" scoped>
.custom-file-upload input {
    position: absolute;
    cursor: pointer;
    height: 0;
    width: 0;
    opacity: 0;
}

.cs--file-upload-current-file {
    max-width: 220px;
}

label {
    font-weight: 400 !important;
}


</style>
<script>
// Mixins
import HasToastrMessage from '@/Mixins/HasToastrMessage.js';

// Helper
import Helper from '@/Support/Helper.js';

export default {
    mixins: [HasToastrMessage],
    props: ['name', 'value', 'maxUploadFileSize'],

    data() {
        return {
            file: null,
            filename: null,
            message: "",
            type: "",
            fileSize: 0,
            maxFileSize: 10,
            validFileTypes: [
                'application/pdf',
                'image/jpeg',
                'image/png'
            ]
        }
    },

    mounted() {
        if (Helper.isset(this.maxUploadFileSize)) {
            this.maxFileSize = this.maxUploadFileSize;
        }
    },

    methods: {


        showFileName(e) {
            this.filename = collect(e.target.value.split('\')).last();
            let file = e.target.files[0];
            let fileSize = file.size / 1000000;

            if (fileSize > this.maxFileSize) {
                this.showToastrErrorMessage(`The uploaded file is too big. Max size: ${this.maxFileSize} MB.`);
                this.$refs.fileInput.value = null
                this.filename = null
            } else if (!this.validFileTypes.includes(file.type)) {
                this.showToastrErrorMessage(`The uploaded file is invalid. Please upload valid type.`);
                this.$refs.fileInput.value = null
                this.filename = null
            } else if (this.filename) {
                this.file = file
                this.showToastrSuccessMessage(`Your file is successfully uploaded.`);
                this.$emit('uploaded')
            } else {
                this.showToastrErrorMessage(`Your file could not be uploaded. Please try again.`);
            }
        },

        resetToastrMessage() {
            this.message = "";
            this.type = "";
        },

        selectFile() {
            this.$refs.fileInput.click();
        },
    }

}

</script>

Answer 1

this.$refs.documentDocument 是一个 vue 组件，要清除它的值属性使用 this.$set(this.$refs.documentDocument, 'value', null) -> https://v2.vuejs.org/v2/guide/reactivity.html 否则 documentDocument 不知道您已经更改了它的值

但如果要清除文件输入值，运行 ():

this.$refs.documentDocument.$refs.fileInput.value = null;
this.$set(this.$refs.documentDocument, 'filename', null);

VueJS文件上传字段无法重置

VueJS file upload field cannot be reset

customvalidator

vue.js

vuetify.js