背景
由于宽带限制,在图片上传时,如果图片体积过大,经常会因为网络原因导致超时,这时候就需要寻求一种在上传之前压缩图片体积的方案。
解决方案
使用 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;