如何重置/清除文件输入

Question

从输入类型=文件重置图像文件时，我遇到了这个问题。这是场景，我设置了一个图像，然后单击“取消”按钮（这意味着它已重置），然后我将再次设置相同的图像，它不会设置。我不知道为什么，但我认为这是一个错误。

这是我重置图像/表单的代码。

 resetImage() {
    this.$refs.addImageForm.reset()
    this.dialog = ''
    this.imgSrc = ''
    this.fileName = ''
    this.imgUrl = ''
    this.file = ''
}

我正在使用 Vue.js 和 Vuetify 如果有帮助的话。我希望你能帮助我。我被这个问题困住了

这是 HTML

 <template>
    <v-dialog
        persistent
        v-model="dialog"
        width="600"
    >
    <template v-slot:activator="{ on }">
        <v-btn depressed color="primary" v-on="on">
        <v-icon class="pr-2">check</v-icon>Approve
        </v-btn>
    </template>
    <v-card>
        <div class="px-4 pt-3">
            <span class="subheading font-weight-bold">Approve Details</span>
            <input
                ref="image"
                type="file"
                name="image"
                accept="image/*"
                style="display: none;"
                @change="setImage"
            />
            <v-layout row wrap align-center>
                <v-flex xs12 class="pa-0">
                <div class="text-xs-center">
                    <v-img :src="imgUrl" contain/>
                </div>
                <VueCropper
                    :dragMode="'none'"
                    :viewMode="1"
                    :autoCrop="false"
                    :zoomOnWheel="false"
                    :background="false"
                    :src="imgSrc"
                    v-show="false"
                    ref="cropper"
                />
                <v-form ref="addImageForm" lazy-validation>
                    <v-layout row wrap class="pt-2">
                    <v-flex xs12>
                        <v-text-field
                        outline
                        readonly
                        :label="imgSrc ? 'Click here to change the image' : 'Click here to upload image'"
                        append-icon='attach_file'
                        :rules="imageRule"
                        v-model='fileName'
                        @click='launchFilePicker'
                        ></v-text-field>
                    </v-flex>
                    </v-layout>
                </v-form>
                </v-flex>
            </v-layout>
        </div>
        <v-divider></v-divider>
        <v-card-actions class="px-4">
        <v-btn
            large
            flat
            @click="resetImage()"
        >Cancel</v-btn>
        <v-spacer></v-spacer>
        <v-btn
            large
            depressed
            color="primary"
            @click="approveCashout"
            :loading="isUploading"
        >Approve</v-btn>
        </v-card-actions>
    </v-card>
    </v-dialog>
</template>

原文由 Peter Parker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 ref 重置文件上传器值。

 this.$refs.fileupload.value = null;

codepen - https://codepen.io/Pratik__007/pen/MWYVjqP?editors=1010

原文由 Patel Pratik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为了重置输入，我让 vue 重新渲染它。只需在输入中添加一个键，并在您希望清除文件输入时更改该键的值。

像这样：

 window.app = new Vue({
  el: '#app',
  data: {
    fileInputKey: 0
  },
  methods:{
    inputChange() {
      console.log('files chosen');
    },
    clear() {
        this.fileInputKey++;
    }
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="file" @change="inputChange($event)" :key="fileInputKey"/>
  <button @click="clear">Clear</button>
</div>

原文由 Dawied 发布，翻译遵循 CC BY-SA 4.0 许可协议