elementUI upload 对图片的宽高做校验
很开心今天中午没有吃饭！
原因是一直没有解决掉一个小问题，于是一直试错，最后看了下源码才有了点头绪，历时四五个小时才解决掉，有点怀疑自己的能力了，所以写下此文，记录一下今天的囧况！
一般情况下遇到问题，自己先是有个思路，然后search answer,如果看到不符合自己思路的直接略过，有点眉目的扫一遍然后试错，大部分情况下自己的思路是对的，所以解决问题也很快，不幸的是有时候自己的思路一开始就是错的，沿着一贯的作法只能是屡试屡败，比如今天遇到的问题就是这样，所以非常怀疑自己的能力了。
问题：elementUI upload 对图片的宽高做校验
一开始我直接百度google，发现都没有这个问题，这应该是一个很常见的需求啊，element 为啥没有实现呢，也许是很简单吧，网上竟然没有此类问题，我到GitHub的issue里看，确实有类似的问题，但没有系统的解决方法，凉凉。
我的思路：
1.按照正常的校验方法推理对宽高的校验
// 例子中的size和type检验
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传icon只能是 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传icon大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
// 推理出的宽高校验
beforeAvatarUpload(file) {
const isSize = false;
const isJPG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传icon只能是 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传icon大小不能超过 2MB!');
}
let img = new Image();
var _URL = window.URL || window.webkitURL;
img.onload=function(){
if(img.width == 96 && img.height == 96) {
isSize = true;
} else {
isSize = false;
}
};
img.src = _URL._URL.createObjectURL(file);
if (!isSize) {
this.$message.error('上传的图片尺寸只能是100*100!');
}
return isJPG && isLt2M && isSize;
},
经过反复的debugger发现img.onload压根不走，isSize始终是false，看来这种模仿的方法显然是行不通的，想到onload是异步的，来不及走就return结束了这个方法，所以想法async一下，让onload之后再执行isSize的判断以及return，于是有了下面的方法。
2.增加回调函数使onload先执行，然后对isSize有赋值操作
beforeAvatarUpload(file) {
const isSize = false;
const isJPG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传icon只能是 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传icon大小不能超过 2MB!');
}
let img = new Image();
var _URL = window.URL || window.webkitURL;
img.onload=function(){
if(img.width == 96 && img.height == 96) {
isSize = true;
} else {
isSize = false;
}
};
img.src = _URL._URL.createObjectURL(file);
setTimeout(() => {
if (!isSize) {
this.$message.error('上传的图片尺寸只能是100*100!');
}
return isJPG && isLt2M && isSize;
});
}
现在isSize确实被重新赋值了，有了正确的提示，但只是一闪而过，并成功的上传了，很郁闷，一步步的开始debugger了，发现最后还是可以回到return的，但是不知道啥原因，接着又开始google了，发现我的思路是错的。
发现beforeAvatarUpload其实是返回一个Promise
仔细看了下掘金上的这篇文章https://juejin.im/post/59e93cd06fb9a0451968b371，发现upload人家内部确实是想要一个promise，你直接给isSize一个boolean值，最后return出去其实是没有任何作用的，这就解释了为何可以弹出错误信息却可以成功上传了，这个是开始的实现方法。
checkWidthHeight(file) {
return new Promise((resolve, reject) => {
let width = 100;
let height = 100;
var _URL = window.URL || window.webkitURL;
var img = new Image();
img.onload = function() {
let valid = width === this.width && height === this.height;
valid ? resolve() : reject(this);
}
img.src = _URL.createObjectURL(file);
})
},
handleBeforeUpload(file) {
return this.checkWidthHeight(file).then(async () => {
isSize = true;
}, () => {
isSize = false;
})
}
我想这应该没问题了吧，该有的都有了，最后还是利用isSize来确定是否成功检验，发现和上次的情况一样，没有质的改变，错误信息还是一闪而过并可以成功上传，这下有点慌了，看来没弄明白为啥需要promise而胡乱的改造，终究解决不了问题，没有get到人家真正的实现方法，于是看下源码吧，一看才有点儿眉目。
element UI upload 源码
// https://github.com/ElemeFE/element/blob/dev/packages/upload/src/upload.vue#L77
upload(rawFile) {
this.$refs.input.value = null;
if (!this.beforeUpload) {
return this.post(rawFile);
}
const before = this.beforeUpload(rawFile);
if (before && before.then) {
before.then(processedFile => {
const fileType = Object.prototype.toString.call(processedFile);
if (fileType === '[object File]' || fileType === '[object Blob]') {
if (fileType === '[object Blob]') {
processedFile = new File([processedFile], rawFile.name, {
type: rawFile.type
});
}
for (const p in rawFile) {
if (rawFile.hasOwnProperty(p)) {
processedFile[p] = rawFile[p];
}
}
this.post(processedFile);
} else {
this.post(rawFile);
}
}, () => {
this.onRemove(null, rawFile);
});
} else if (before !== false) {
this.post(rawFile);
} else {
this.onRemove(null, rawFile);
}
},
这才发现this.beforeUpload是一个真正的promise，你给人家必须返回一个promise，简单的boolean值是没用的，因为人家内部还有很多的对promise的实现，这下清楚了一点，就顺水推舟的有了最终的方法，经过多样测试，的确可以。
最终版代码
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传icon只能是 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传icon大小不能超过 2MB!');
}
const isSize = new Promise(function(resolve, reject) {
let width = 100;
let height = 100;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width >= width && img.height >= height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(() => {
return file;
}, () => {
this.$message.error('上传的icon必须是等于或大于100*100!');
return Promise.reject();
});
return isJPG && isLt2M && isSize;
}
看了最终版的代码发现确实也很简单，我们往往被固有的思维带入歧途，好在有伟大的google，总是可以悬崖勒马，让我们浪子回头，其实还是自己的功力不深啊，以后多注重基础，多挖掘细节，以小见大，修炼内功！
