antd-mobile-v2图片选择器ImagePicker压缩图片处理方案

antd-mobile v2版本 在图片选择器后，没有压缩图片选项。自己写一下

官方文档：https://antd-mobile-v2.surge.sh/components/image-picker-cn/

canvas压缩图片常用的是：压缩图片宽高、透明度 这两个。如果要高级压缩，可查看: 我的另一个博客

直接看代码，这只是压缩案例。若项目需要前端上传腾讯云桶，可查看我的其他博客

import React, { useState } from 'react';
import { ImagePicker, Toast } from 'antd-mobile';

const ImagePickerExample = () => {
    const [imgList, setImgList] = useState([]);

    function convertImgToBase64(imgInfo, outputFormat) {
        //小于500kb（500,000） 不压缩 - 不需要可关闭
        if (imgInfo.file.size <= 5e5) return { ...imgInfo, convertImg: imgInfo.url };
        return new Promise((resolve, reject) => {
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            let img = new Image;
            img.crossOrigin = 'Anonymous';
            img.onload = function () {
                let width = img.width;
                let height = img.height;
                // 比例可根据项目需要自行修改
                let rate = 1 / (Math.round(width / 750) || 1);
                canvas.width = width * rate;
                canvas.height = height * rate;
                ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
                let dataURL = canvas.toDataURL(outputFormat || 'image/jpeg', 0.9); // 0.9 可改成0-1，清晰度
                resolve({ ...imgInfo, convertImg: dataURL });
            }
            img.src = imgInfo.url;
        })
    }

    // 新增-删除 图片事件
    function onChange(files, type) {
        if (type === 'add') {
            Toast.loading('上传中...', 1000, '', false);
            let taskAll = files.map(item => {
                if (item.convertImg) {
                    return item;
                } else {
                    return convertImgToBase64(item);
                }
            });
            Promise.all(taskAll).then(arr => {
                Toast.hide();
                setImgList(arr);
            }).catch(() => {
                Toast.hide();
                Toast.info(`上传失败，请稍后重试~`, 2, '', false);
            })
        } else {
            setImgList(files);
        }
    }

    return (
        <ImagePicker
            multiple
            length={3}
            files={imgList}
            onChange={onChange}
        />
    )
}

export default ImagePickerExample

用imgList控制已选图片。onChange触发事件处理。上传到后端亦可在onChange里，分段上传。不要一股脑上传图片，有些图片太大，多张就很费时间。