图片需要使用 vee-validate vue 进行验证

Posted 2023-02-23

【中文标题】图片需要使用 vee-validate vue 进行验证

【英文标题】：Image required validation using vee-validate vue

【发布时间】：2020-12-20 10:05:54

【问题描述】：

我是 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-model，所以我创建了一个虚拟隐藏输入字段并在v-中传递了imgUrl型号<input type="text" hidden v-model="imgUrl" />

imgUrl 从 file drop 或 input file 获取图像 src。

我添加了一个关闭按钮来取消 imgUrl 变量。

<button @click="imageNull" class="img-close">
      <b-icon icon="x"></b-icon>
</button>

我将这个 imgUrl 传递给 vee-validate extend 方法。

.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 的新手。如果我做错了什么请告诉我

【问题讨论】：

这个问题你解决了吗

【参考方案1】：

我认为问题在于你的handleImage 函数不正确

试试这个；

var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => 
  this.imgUrl = reader.result;
; 

【讨论】：

还是不行。有没有其他方法可以先运行我的 handleImage 函数？