react antd upload beforeUpload 压缩图片

最新推荐文章于 2023-08-30 14:10:32 发布

Mr_Wu2018

最新推荐文章于 2023-08-30 14:10:32 发布

阅读量592

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/ycclydy/article/details/125614399

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

const beforeUpload = (file) => {
    // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    // if (!isJpgOrPng) {
    //   message.error('You can only upload JPG/PNG file!');
    // }
    // const isLt2M = file.size / 1024 / 1024 < 2;
    // if (!isLt2M) {
    //   message.error('Image must smaller than 2MB!');
    // }
    return new Promise((resolve, reject) => {
      // 图片压缩
      let reader = new FileReader(), img = new Image();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        img.src = e.target.result;
      }

      img.onload = function () {
        let rate = 0.2;

        // 文件大小KB
        const fileSizeKB = Math.floor(file.size / 1024);
        console.log('fileSizeKB', fileSizeKB)

        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');

        // let originWidth = this.width;
        // let originHeight = this.height;
        // canvas.width = originWidth;
        // canvas.height = originHeight;
        // context.clearRect(0, 0, originHeight, originHeight);
        // context.drawImage(img, 0, 0, originHeight, originHeight);

        // 缩放比例，默认0.5
        let targetW = (canvas.width = this.width * rate);
        let targetH = (canvas.height = this.height * rate);
        context.clearRect(0, 0, targetW, targetH);
        context.drawImage(img, 0, 0, targetW, targetH);
        canvas.toBlob((blob) => {
          let imgFile = new File([blob], file.name, {type: file.type}); // 将blob对象转化为图片文件
          console.log(Math.floor(imgFile.size / 1024))
          resolve(imgFile);
        }, file.type, rate); // file压缩的图片类型
      }
    })
  };