上传图片之前压缩图片

背景

由于宽带限制，在图片上传时，如果图片体积过大，经常会因为网络原因导致超时，这时候就需要寻求一种在上传之前压缩图片体积的方案。

解决方案

使用 React、Antd、ImgZip（项目中部分代码）。

import React, { Component, useState, useEffect } from 'react';
import ReactDom from 'react-dom';
import { Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import ImgZip from 'imgzip';

// 打卡
const UploadZipExample = () => {
  const [fileList, setFileList] = useState([]);

  // 上传前
  const beforeUpload = (file) => {
    return new Promise((resolve) => {
      const zipOpts = { quality: 0.85 };
      // 1m 以上的图片限制宽度
      if (file.size && file.size >= 1 * 1024 * 1024) {
        Object.assign(zipOpts, { width: 800 });
      }
      // 图片压缩
      const Compress = new ImgZip(zipOpts);
      Compress.photoCompress(file, function (base64) {
        // document.getElementById('img').src = base64  //预览图片
        // 转blod流上传 convertBase64UrlToBlob函数为imgzip的静态函数
        const blod = ImgZip.convertBase64UrlToBlob(base64);
        resolve(blod);
      });
    });
  };

  // dom
  return (
    <div className="lilith-read">
      {/* 上传 */}
      <Upload
        name="file"
        multiple={true}
        action="https://www.example.com"
        showUploadList={true}
        listType="picture-card"
        fileList={fileList}
        beforeUpload={beforeUpload}
      >
        <div>
          <PlusOutlined />
          <div style={{ marginTop: 8 }}>Upload</div>
        </div>
      </Upload>
    </div>
  );
};

export default UploadZipExample;