快捷導(dǎo)航

前端 react 實(shí)現(xiàn)圖片上傳前壓縮(縮率圖)

更新時(shí)間：2024年08月05日 10:43:51 作者：Dragon Wu

這篇文章主要介紹了前端 react 實(shí)現(xiàn)圖片上傳前壓縮(縮率圖),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

一、安裝

npm install compressorjs
或
yarn add compressorjs

官方文檔：compressorjs - npm (npmjs.com)

二、編寫(xiě)工具類

/**
 * @author Dragon Wu
 * @since 2024/8/4 12:23
 * 圖片壓縮工具
 */
import Compressor from 'compressorjs';
// 壓縮圖片方法 （中間件）
export function compressor(file: File, defaultQuality: number = 0.6) {
    // console.log('壓縮前: ', (file.size / 1024 / 1024).toFixed(1), 'M');//控制臺(tái)打印圖片大小
    const filesize: number = parseFloat((file.size / 1024 / 1024).toFixed(1));
    let quality = defaultQuality;
    if (filesize < 0.8) { //這里可以設(shè)置自己的壓縮規(guī)則
        quality = 1;
    } else if (filesize < 1) {
        quality = 0.8;
    } else if (filesize < 1.5) {
        quality = 0.7;
    } else if (filesize < 2) {
        quality = 0.5;
    } else if (filesize < 3) {
        quality = 0.33;
    } else if (filesize < 4) {
        quality = 0.25;
    } else if (filesize < 5) {
        quality = 0.2;
    } else if (filesize < 8) {
        quality = 0.125;
    } else if (filesize < 10) {
        quality = 0.1;
    } else {
        return new Promise((resolve, reject) => {
            reject({
                msg: '圖片不能超過(guò)10M'
            })
        });
    }
    // console.log('壓縮比例: ', quality);
    return new Promise((resolve) => {
        new Compressor(file, {
            quality: quality,
            success(result: File | Blob) {
                // console.log('壓縮后: ', (result.size / 1024 / 1024).toFixed(1), 'M');
                if (result instanceof Blob) {
                    //@ts-ignore
                    result = new File([result], "f" + (result?.name as string).slice(-8), {type: result.type})
                }
                resolve(result);
            },
            error(err) {
                // 壓縮報(bào)錯(cuò)的話 返回原圖片
                resolve(file);
            },
        });
    });
}

三、獲取壓縮后的File對(duì)象

const handleBeforeUpload = (file: FileType) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.warning('只能上傳JPG/PNG格式!').then();
        }
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
            message.warning('圖片不得超過(guò)10MB!').then();
        }
        compressor(file).then(res => {
            if (isJpgOrPng && isLt2M) {
                onChange(res)
            }
        })
        return false;
    }