VeValidate(vue.js) 이미지 파일 크기 및 치수 검증

VeValidate(vue.js) 이미지 파일 크기 및 치수 검증

vue.js의 vee 검증을 사용하여 이와 같은 형식으로 검증을 설정하는 방법

• 이미지 치수가 500*500픽셀 미만

• 이미지 크기가 100KB 미만

이러한 요건 중 두 가지에는 사용 가능한("원어민") 규칙이 있습니다.

• 이미지여야 합니다. 규칙을 사용하십시오.
• 이미지 크기가 100kb 미만입니다. 규칙을 사용하십시오.

자, 이제

• 이미지 치수가 500*500픽셀 미만

...문제는 적은 것에 있다.

정확한 크기에 대한 규칙 테스트입니다.따라서 크기보다 작거나 같은 크기를 테스트하려면 조정해야 합니다.

간단한 해결책은 규칙의 공식 구현에서 코드를 가져와 더 작거나 같은지 테스트하도록 변경하는 것입니다.

아래 데모에서는 이렇게 되어 있습니다.로서 작성됩니다.maxdimensions:500,500규칙.

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>

언급URL : https://stackoverflow.com/questions/49370934/veevalidatevue-js-image-file-size-and-dimensions-validation