上传图片前校验格式

最新推荐文章于 2024-06-10 18:16:43 发布

success-ladder

最新推荐文章于 2024-06-10 18:16:43 发布

阅读量194

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/successLadder/article/details/136218441

版权

interface IImgVerifyParams {
  file: File;
  size: number;
  width?: number;
  height?: number;
}
export const imgVerify = (imgVerifyParams: IImgVerifyParams) => {
	const { file, size, width, height } = imgVerifyParams;
 	// 大小校验
    if (file.size > size * 1024 * 1024) {
      reject(`${file.name}图片大于${size}兆, 请压缩后重新上传`);
      return;
    }
    // 类型校验
    const types = ['image/jpg', 'image/jpeg', 'image/png'];
    if (!types.includes(file.type)) {
      reject('只能上传JPG 、JPEG 、PNG格式的图片～');
      return;
    }
    // 比例校验
    if (width && height) {
      const img = document.createElement('img');
      const source = URL.createObjectURL(file);
      img.onload = () => {
        const { width: w, height: h } = img;
        let valid = w === width && h === height;
        if (!valid) {
          reject(`图片尺寸不符合要求，要求${width}*${height}!`);
          return;
        }
        resolve(true);
      };
      img.src = source;
    } else {
      resolve(true);
    }
}

// 上传前拦截
const beforeUpload = (file: any) => {
	const res = new Promise((resolve, reject) => {
      imgVerify({
        file,
        size: 2,
        width: 327,
        height: 180
      })
      .then(resolve)
      .catch(errMsg => {
        Message.error(errMsg);
         reject(false);
       });
    })
    return res;
}