如何 reset/clear 文件输入

Question

我因从输入类型=文件中重置图像文件而遇到这个问题。场景是这样的我设置了一张图片，然后我点击了 'Cancel' 按钮（这意味着它被重置），然后我将再次设置相同的图片，它不会设置。我不知道为什么，但我认为这是一个错误。

这是我重置 image/form 的代码。

    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

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

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

this.$refs.inputFile.reset();

上述代码重置字段值。

Answer 3

为了重置输入，我让 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 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
}

如何 reset/clear 文件输入

How to reset/clear file Input

types

file

input

reset

vue.js