我从输入类型=文件中重置图像文件时遇到了这个问题。这是一个场景,我设置了一个图像,然后我单击了“取消”按钮(这意味着它被重置了),然后我将再次设置相同的图像,它不会设置。我不知道为什么,但我认为这是一个错误。
下面是我的代码重置图像/窗体。
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>
7条答案
按热度按时间ma8fv8wu1#
您可以使用
ref
重置文件上载程序值。编码末端-https://codepen.io/Pratik__007/pen/MWYVjqP?editors=1010
lokaqttq2#
为了重置输入,我让vue重新呈现它,只要在输入中添加一个键,并在您希望清除文件输入时更改该键的值即可。
就像这样:
gzszwxb43#
我尝试了我在Stackoverflow上找到的几个建议,但在我的项目中有几个错误。解决我问题的是:
以上代码重置字段值。
pu3pd22g4#
我也遇到了这个问题,无法重置值。在浏览了所有以前项目的代码并修改它们之后,我得到了很多方法,通过这些方法可以重置文件输入。其中一种方法是do,如果你想在处理一些代码后执行它,就捕获事件对象。另一种方法是更改输入元素的类型,然后再改回来。
v440hwme5#
用于成分API
内部设置功能:
omqzjyyz6#
我尝试了多种方法,最好的方法是:
定义此方法:
在模板中,使用如下:
7xzttuei7#
Vue 2或3或带有合成API的Nuxt,您可以使用它来重置表单:
要仅重置输入文件,请使用以下代码: