[Vue] el-upload 上传校验

业务场景：
选中图片，上传，校验size, width, height，转为base64字符串，发送到后端，存入数据库。

这里上传使用el-upload组件，本文要介绍的是对图片进行size, width, height的校验。

首先， 有个必填项action，这里我们不直接利用el-upload组件传输到后端，所以这里写个空串。

先看一下如何获取图片文件。选中图片，点击确定后，图片文件被读取到内存中，通过on-change事件获取这个图片文件。

控制台打印，看一下file里有什么

这里url中的字符串内容 "blob:http:// .... " 指向了读取到内存中的文件

(通过浏览器地址栏输入blob开头的字符串，可以直接访问上传的图片文件)

file: {} 对象里面已经有size选项了，实现size的判定不难，要注意size的单位是bit，bit到kb的转换。

function validateImage({imageData, maxSize}) {
  return new Promise((resolve, reject) => {
    if (!imageData.url) {
      reject("图片上传异常");
    }
    if (imageData.size > maxSize) {
      reject(`图片大小不能超过${Math.floor(maxSize / 1024)}KB`);
    }
    resolve(imageData);
}

但是实现width, height的判定有点麻烦，不可以直接用imageData.width, imageData.height。这里给出解法，要新建一个new Image()，利用image.onload进行width和height的判定， 下面直接看代码。

这里width和height的单位都是px，为了只写一个resolve()，将size的判定也挪到onload函数中。

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/gl8934uzeao9b4s0