使用browser-image-compression插件进行图片压缩

1.安装插件---browser-image-compression

yarn add browser-image-compression

2.引入

import imageCompression from 'browser-image-compression';

3.封装图片压缩方法

/**
 * 压缩图片
 * @param {File} data
 * @return {Promise<File>} 返回压缩后的 File
 */
async function compressImage(data) {
    try {
        /** @type {Blob} */
        const blobFile = await imageCompression(data, {
            maxSizeMB: 0.6,
            maxWidthOrHeight: 1080,
            useWebWorker: true,
        });

        return new File([blobFile], data.name, { type: data.type });
    } catch (err) {
        console.log(err);
        return Promise.reject(err);
    }
}

4.在需要使用的组件中引入使用即可

//举例
//引入封装好的压缩图片方法
import {compressImage} from "@/utils/util";

//上传组件方法
async uploadApplyImage() {
            try {
                //  先进行压缩图片
                const compressImages = [
                    await compressImage(File文件对象1);
                    await compressImage(File文件对象2),
                ];
                // 调用上传图片接口
                return await FileManager.uploadList(compressImages);
            } catch (err) {
                return null;
            }
        },