VeeValidate(vue.js) 图像文件大小和尺寸验证 [英] VeeValidate(vue.js) image file size and dimensions validation

问题描述

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

• 图像尺寸小于 500*500 像素

• 图片大小小于 100kb

解决方案

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

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

现在，对于

• 图像尺寸小于 500*500 像素

...问题在于less.

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

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

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

Vue.use(VeeValidate);//基于 https://github.com/baianat/vee-validate/blob/2.0.6/src/rules/dimensions.js//和 https://github.com/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.com/vue"></script><script src="https://cdn.jsdelivr.net/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.com/baianat/vee-validate/blob/2.0.6/src/rules/dimensions.js
// and https://github.com/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.com/vue"></script>
<script src="https://cdn.jsdelivr.net/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屋！