VeeValidate（vue.js）图像文件大小和尺寸验证

如何使用vue.js中的vee validate在这样的表单中设置验证

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

• 图像大小小于100kb

---

对于其中两项要求，有可用的（“本机”）规则：

• 必须是一个图像，使用
• 图像大小小于100kb，请使用

现在，对于

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

…问题在于少一点

准确尺寸的测试。因此，您需要调整它以测试大小是否小于或等于该大小

一个简单的解决方案是从中获取代码，并将其更改为测试较小或等于的值

这就是下面的演示所做的。它创建为

maxdimensions:500500

规则

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#L18
常量maxDimensionsRule={
getMessage（字段[宽度，高度]，数据）{
return（data&&data.message）|${field}字段必须达到${width}像素乘以${height}像素；
},
验证（文件[宽度、高度]）{
const validateImage=（文件、宽度、高度）=>{
const URL=window.URL | | window.webkitURL；
返回新承诺（解决=>{
常量图像=新图像（）；
image.onerror=（）=>resolve（{valid:false}）；
image.onload=（）=>解析({
有效：image.width非常感谢您的帮助。工作正常。您可以在此处查看vee验证相关问题：？