如何重置/清除文件输入

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>

Answer 1

您可以使用

ref

重置文件上传值。

this.$refs.fileupload.value = null;

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

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>

Answer 3

我尝试了在 Stackoverflow 上找到的几个建议，但在我的项目中有几个错误。 解决我的问题的是：

<input type="file" ref="inputFile"/>

this.$refs.inputFile.reset();

上面的代码重置字段值。

Answer 4

我也遇到这个问题，无法重置值。在浏览了所有以前项目的代码并修改它们之后，我得到了很多可以重置文件输入的方法。 如果你想在处理一些代码后执行事件对象，其中一种方法是捕获事件对象。另一种方法是更改输入元素的类型并再次将其更改回来。

<div id="app">
  <input type="file" @change="onFilePicked" ref="file">
  <button @click="clear()">Cancel</button>
</div>

var v = new Vue({
    el:'#app',

    data:{},

    methods:{
        clear() { 
            this.$refs.file.type='text';    
            this.$refs.file.type='file'; 
        },
        onFilePicked(event){
            //if you directly want to clear the file input after handling 
            //some code........
            event.target.value=null;
            //OR
            event.target.value='';
        }
    },
});

Answer 5

作曲 api

<input type="file" 
       class="custom-file-input" 
       id="customFileLang" 
       lang="en" 
       accept="image/*"
       :class="{ 'is-invalid': errors && errors.images }"
       @change="previewImg" multiple
>

内部设置功能：

const imgInput = ref(null) // for input type file

const previewImg = (event) => {
    imgInput.value = event
    // rest of code to preview img
}

const uploadImage = () => {
    //on success
    imgInput.value.target.value = null //reset input type file
}

Answer 6

我在vue上尝试了多种方式，最好的方式是：

定义这个方法：

removePic(inp) {
  if (this.$refs[inp].files.length === 0) return
  this.$refs[inp].files = []
  delete this.body[inp]
  this.$refs[`${inp}_preview`].src = ''
},

在模板中这样使用：

                   <b-form-file
                      ref="pic"
                      name="pic"
                      accept="image/jpeg, image/png, image/gif"
                    />

                  <feather-icon
                    icon="XIcon"
                    size="18"
                    class="text-primary stroke-current"
                    @click="removePic('pic')"
                  />

                 <div>
                  <img ref="pic_preview" src="#" alt="select" />
                </div>

Answer 7

Vue 2 or 3 or Nuxt with composition API，你可以用它来重置表单：

<template>
  <form ref="refForm">
    <input value="hello world" />
  </form>
</template>

<script setup>
const refForm = ref(null)

onMounted(() => {
  setInterval(() => {
    refForm.value.reset()
  }, 3000) // in 3 seconds will reset the form
})
</script>

仅重置输入文件，使用此代码：

<template>
  <input ref="refFile" type="file" @change="reset" />
</template>

<script setup>
const refFile = ref(null)

const reset = () => {
  setInterval(() => {
    refFile.value.value = ''
  }, 3000) // in 3 seconds will reset the file input
}
</script>