vue2+elementui使用compressorjs压缩上传的图片

首先是npm install compressorjs

然后新建一个compressorjs.js的文件

复制代码
import Compressor from "compressorjs";

// 默认压缩配置
const DEFAULT_COMPRESS_OPTIONS = {
  quality: 0.6, // 默认压缩质量 (0-1)
  maxWidth: 1920, // 最大宽度
  maxHeight: 1080, // 最大高度
  convertSize: 5 * 1024 * 1024, // 超过5MB的图片转为WebP
};

/**
 * 压缩图片文件
 * @param {File} file - 待压缩的图片文件
 * @param {Object} options - 压缩配置项
 * @returns {Promise<File>} 压缩后的文件
 */
export function compressImage(file, options = {}) {
  return new Promise((resolve, reject) => {
    // 合并配置并限制最小压缩质量
    const mergedOptions = {
      ...DEFAULT_COMPRESS_OPTIONS,
      ...options,
      quality: Math.max(
        0.1,
        options.quality ?? DEFAULT_COMPRESS_OPTIONS.quality
      ),
      maxWidth: Math.min(
        options.maxWidth ?? DEFAULT_COMPRESS_OPTIONS.maxWidth,
        8192
      ),
      maxHeight: Math.min(
        options.maxHeight ?? DEFAULT_COMPRESS_OPTIONS.maxHeight,
        8192
      ),
    };

    // 执行压缩
    new Compressor(file, {
      ...mergedOptions,
      success(result) {
        if (!result) {
          return reject(new Error("Compression result is empty"));
        }
        resolve(new File([result], file.name, { type: result.type }));
      },
      error(err) {
        reject(err);
      },
    });
  });
}

具体的使用页面。只用在上传之前before-upload的函数中压缩就可以啦

复制代码
<el-upload
  :before-upload="beforeUploadImg"
>
</el-upload>
复制代码
import { compressImage } from "@/utils/imageCompress";

async beforeUploadImg(file) {
  const fileSize = file.size / 1024 / 1024;
  let types = ["image/jpeg", "image/jpg", "image/png", "application/pdf"];
  const isImageOrPDF = types.includes(file.type);
  if (!isImageOrPDF) {
    this.$message.error("上传图片只能是 JPG/JPEG/PNG/PDF 格式!");
    return false;
  }

  try {
    // 压缩图片(仅处理大于5MB的图片)。当前你也可以不加这个限制就是压缩所有上传的图片
    if (fileSize > 5) {
      const compressedFile = await compressImage(file, {
        quality: fileSize > 10 ? 0.7 : 1,
        axWidth: Infinity, // 不限制宽度
        maxHeight: Infinity, // 不限制高度
      });
      return compressedFile; // 返回压缩后的文件
    }
    return file;
  } catch (err) {
    if (fileSize > 5) {
      this.$message({
        message: "上传图片大小超过限制",
        type: "warning",
      });
      return false;
    }
    console.error("压缩失败:", err);
    return file; // 降级处理:上传原文件
  }

}

相关推荐
万少13 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL19 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0234 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang36 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景38 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼38 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿40 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再43 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css