VeeValidate(vue.js) 图像文件大小和尺寸验证

本文介绍了VeeValidate(vue.js) 图像文件大小和尺寸验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

如何在 vue.js 中使用 vee validate 以这样的形式设置验证

图像尺寸小于 500*500 像素

图片大小小于 100kb

解决方案

对于其中两个要求，有可用的(本机")规则:

必须是图片，使用image 规则.图片小于100kb，使用size:100 规则.

现在，对于

图像尺寸小于 500*500 像素

...问题在于less.

dimensions 规则 测试确切大小.因此，您需要对其进行调整以测试小于或等于该尺寸的尺寸.

一个简单的解决方案是从 dimensions 规则的官方实现 并将其更改为测试小于或等于.

这就是下面的演示所做的.它创建为 maxdimensions:500,500 规则.

Vue.use(VeeValidate);//基于 https://github/baianat/vee-validate/blob/2.0.6/src/rules/dimensions.js//和 https://github/baianat/vee-validate/blob/2.0.6/locale/en.js#L18const maxDimensionsRule = {getMessage(字段，[宽度，高度]，数据){返回(数据&& data.message)||`${field} 字段必须达到 ${width} 像素乘 ${height} 像素.`;},验证(文件，[宽度，高度]){const validateImage = (文件，宽度，高度) =>{const URL = window.URL ||window.webkitURL;返回新的承诺(解决 => {const image = new Image();image.onerror = () =>解决({有效:假})；image.onload = () =>解决({有效:image.width <= Number(width) &&image.height <= Number(height)//仅从官方规则改变});image.src = URL.createObjectURL(file);});};常量列表 = [];for (let i = 0; i  validateImage(file, width, height)));}};新的 Vue({el: '#app',创建(){this.$validator.extend('maxdimensions', maxDimensionsRule);}})

<script src="https://unpkg/vue"></script><script src="https://cdn.jsdelivr/npm/vee-validate@latest/dist/vee-validate.js"></script><div id="应用程序"><form role="form" class="row">我的文件:<input name="My File" v-validate data-vv-rules="image|maxdimensions:500,500|size:100" type="file"><br><span v-if="errors.has('My File')">{{ errors.first('My File') }}</span></表单>

How to set validation in form like this using vee validate in vue.js

Image dimension less then 500*500 pixel

Image size less then 100kb

解决方案

For two of those requirements, there are available ("native") rules:

Must be an image, use image rule. Image size less then 100kb, use size:100 rule.

Now, for the

Image dimension less than 500*500 pixels

...the problem is with the less.

The dimensions rule test for exact size. So you'll need to tweak it to test for size smaller than or equal to the size.

A simple solution would be to take the code from the official implementation of the dimensions rule and change it to test for smaller or equal to.

That's what the demo below does. It creates as maxdimensions:500,500 rule.

Vue.use(VeeValidate);

// based on https://github/baianat/vee-validate/blob/2.0.6/src/rules/dimensions.js
// and https://github/baianat/vee-validate/blob/2.0.6/locale/en.js#L18
const maxDimensionsRule = {
  getMessage(field, [width, height], data) {
      return (data && data.message) || `The ${field} field must be UP TO ${width} pixels by ${height} pixels.`;
  },
  validate(files, [width, height]) {
    const validateImage = (file, width, height) => {
    const URL = window.URL || window.webkitURL;
      return new Promise(resolve => {
        const image = new Image();
        image.onerror = () => resolve({ valid: false });
        image.onload = () => resolve({
          valid: image.width <= Number(width) && image.height <= Number(height) // only change from official rule
        });

        image.src = URL.createObjectURL(file);
      });
    };
    const list = [];
    for (let i = 0; i < files.length; i++) {
      // if file is not an image, reject.
      if (! /\.(jpg|svg|jpeg|png|bmp|gif)$/i.test(files[i].name)) {
        return false;
      }
      list.push(files[i]);
    }
    return Promise.all(list.map(file => validateImage(file, width, height)));
  }
};


new Vue({
  el: '#app',
  created() {
    this.$validator.extend('maxdimensions', maxDimensionsRule);
  }
})

<script src="https://unpkg/vue"></script>
<script src="https://cdn.jsdelivr/npm/vee-validate@latest/dist/vee-validate.js"></script>


<div id="app">
   <form role="form" class="row">      
        My File: <input name="My File" v-validate data-vv-rules="image|maxdimensions:500,500|size:100" type="file"><br>
        <span v-if="errors.has('My File')">{{ errors.first('My File') }}</span>
    </form>
</div>

这篇关于VeeValidate(vue.js) 图像文件大小和尺寸验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！