如何解决使用vee-validate vue进行图像所需的验证
我是vueJS的新手。
我想使用vee-validate
在图像中添加所需的验证器。
内置的必填验证程序不起作用,因此我创建了一个自定义验证程序, img_required 。
这是我到目前为止所做的。
.vue html部分
<ValidationProvider rules="image|img_required" bail="false" v-slot="{ errors,validate }">
<div class="row row-xs mg-t-20 mx-0">
<label class="col-sm-4 form-control-label">
<span class="tx-danger">*</span> Image:
</label>
<div
@dragover.prevent
@change="validate"
@drop.prevent
class="file-wrapper col-sm-8 mg-t-10 mg-sm-t-0"
>
<div v-if="imgUrl">
<button @click="imageNull" class="img-close">
<b-icon icon="x"></b-icon>
</button>
<img style="height: 127px" :src="imgUrl" />
</div>
<input type="text" hidden v-model="imgUrl" />
<div v-if="!imgUrl" @drop="handleImage($event,'drop')">
<input
type="file"
class="form-control"
name="file"
accept="image/*"
@change="handleImage($event,'input'); validate()"
/>
Drop image
</div>
</div>
</div>
<div v-for="error in errors" :key="error">{{ error }}</div>
</ValidationProvider>
我不能在输入类型文件中使用 v-模型,所以我创建了一个虚拟的隐藏输入字段并在v-中传递了 imgUrl 型号<input type="text" hidden v-model="imgUrl" />
imgUrl 从文件拖放或输入文件获取图像src。
我添加了一个关闭按钮以使imgUrl变量无效。
<button @click="imageNull" class="img-close">
<b-icon icon="x"></b-icon>
</button>
我通过了此 imgUrl 以验证扩展方法。
.vue 脚本部分
data() {
return {
imgUrl: ""
}
},methods: {
handleImage(e,action) {
var file;
if (action == "input") file = e.target.files[0];
else if (action == "drop") file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = (e) => {
this.imgUrl = e.target.result;
};
reader.readAsDataURL(file);
},imageNull() {
this.imgUrl = "";
},}
这是 validation.js 文件
extend('img_required',{
validate(imgUrl) {
console.log(imgUrl);
return imgUrl !== "";
},message() {
return "Image is required!";
}
});
在这里,我正在检查 imgUrl 是否为空的 base64 字符串。
当我按下“关闭”按钮时, imgUrl 无效。
这里的问题是当我打印此imgUrl时,它显示 event.target.files 。
我是vue.js的新手。请告诉我是否做错了事
解决方法
我认为问题在于您的 }
]
函数不正确
尝试一下;
handleImage
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。