npm install browser-image-compression

utils/common.js

import imageCompression from 'browser-image-compression';

/**
 * 压缩图片文件
 * @param file - 要压缩的图片文件
 * @param maxSizeMB - 最大文件大小（MB），超过此大小才压缩，默认 1MB
 * @returns Promise<File> - 返回压缩后的图片文件（如果小于 maxSizeMB 则返回原文件）
 */
export async function compressImage(file, maxSizeMB=1){
  // 检查文件大小（MB）
  const fileSizeMB = file.size / 1024 / 1024;

  // 如果文件小于等于 maxSizeMB，不需要压缩，直接返回原文件
  if (fileSizeMB <= maxSizeMB) {
    return file;
  }

  // 根据文件大小动态设置压缩选项
  // 注意：browser-image-compression 默认保持宽高比（等比例压缩）
  const options = {
    maxSizeMB: maxSizeMB, // 目标文件大小（MB）
    maxWidthOrHeight: 1920, // 最大宽度或高度（会等比例缩放，保持宽高比）
    useWebWorker: true, // 使用 Web Worker 进行压缩（不阻塞主线程）
    fileType: file.type, // 保持原文件类型
    // 压缩质量（0-1），如果不设置，库会根据 maxSizeMB 自动调整
    initialQuality: 0.8, // 可选：初始压缩质量
  };

  try {
    const compressedBlob = await imageCompression(file, options);
    console.log(
      `图片压缩完成: ${file.name}, 原始大小: ${fileSizeMB.toFixed(2)}MB, 压缩后: ${(compressedBlob.size / 1024 / 1024).toFixed(2)}MB`
    );
    // 转化为file
    const compressedFile = new File([compressedBlob], file.name, {
      type: compressedBlob.type,
      lastModified: Date.now()
    });
    return compressedFile;
  } catch (error) {
    console.error('图片压缩失败:', error);
    // 压缩失败时返回原文件
    return file;
  }
}

文件中使用

import { compressImage } from '@/utils/common'

  const compressedFile = await compressImage(file.file, 1)
  const formData = new FormData()
  formData.append('file', compressedFile)