ElementPlus Upload组件使用compressorjs压缩图片上传

原创

已于 2025-05-03 13:49:15 修改 · 2.7k 阅读

标签

#unocss #tailwindcss #compressorjs #elementui #el-upload

于 2024-03-26 00:42:08 首次发布

本文介绍了如何在Element-UI的el-upload组件中集成Compressor.js库，实现在移动端对大图片进行压缩，以减少文件大小、节省带宽和提升用户体验。详细阐述了图片压缩策略和组件的自定义上传逻辑。

需求

Compressor.js 是一个用于在客户端（即在浏览器中）对图片进行压缩的 JavaScript 库。使用它有以下几个优点和意义：

减少文件大小: 图片通常是网页中占用大量带宽的资源之一。通过使用 Compressor.js 对图片进行压缩，可以显著减少图片文件的大小，从而减少页面加载时间，提高网页性能。
节省带宽: 在移动设备上访问网页时，特别是在使用移动数据连接（如4G或5G）时，大文件大小的图片会消耗大量的数据流量。通过压缩图片，可以节省用户的数据流量，降低用户的数据费用。
提高用户体验: 加载速度快的网页可以提供更好的用户体验。通过减少图片大小，可以加快网页的加载速度，使用户能够更快地访问和浏览网页内容。
支持移动端开发: 在移动端开发中，特别是在开发需要上传图片的应用时，通常需要在客户端对上传的图片进行压缩以减少上传时间和数据传输量。Compressor.js 提供了一个方便的方式来在移动设备上对图片进行压缩，使得开发人员能够轻松地实现这一功能。
保持图片质量: Compressor.js 在压缩图片的同时，尽可能地保持图片的质量，避免出现明显的视觉损失。尤其对于相机直拍的照片，有很好的加速作用，试想当服务器网络质量差，带宽只有数十K的时候，上传一张5M的高清图至少需要一分钟以上。而通过压缩操作后，5M照片可以压缩至200~300K且不损失质量，上传至需要几秒即可完成，体验立马上去一个档次。

而Element-UI的上传组件，默认就是使用FormData进行的直传，如果可以和压缩功能结合，当图片较大时自动处理。则在移动端上传直拍照片可以获得很好的体验效果。

集成方案

按照comppressor.js的文档(compressorjs - npm)。我们可以新建一个Compressor，在其success回调里进行上传。其入口和回调返回都是File结构，这样我们便可以处理文件流的压缩

针对element-ui的el-upload组件，有一个扩展点，即http-request可以传入一个UploadRequestHandler结构：

export declare type UploadRequestHandler = (options: UploadRequestOptions) => XMLHttpRequest | Promise<unknown>;

返回一个Promise进行对应的上传处理，这样我们即可绕过el-upload自带的上传逻辑，建立我们自己的上传及处理返回值逻辑

我们定义处理器如下：

// 文件上传切面，支持图片压缩和适配权限，默认激活策略是：图片大小大于300k(jpg)或500k(png)，比例缩放到1334大小
export function optImgHttpRequest(options: UploadRequestOptions) {
  // el-upload的图片压缩适配
  const SIZE_LIMIT = 1334
  const JPG_KB_START = 300 * 1024
  const PNG_KB_START = 500 * 1024

  const thumbWidth = options.data['thumbWidth']
  const thumbHeight = options.data['thumbHeight']

  const uploadProcess = (resolve: Function, reject: Function, file: File) => {
    const formData = new FormData()
    formData.append(
      'file',
      file,
      options.file.name.toLowerCase().endsWith('.png') && options.file.size > 5000000
        ? options.file.name.replace(/(\.PNG|\.png)$/i, '.jpg') //超过5M的png会转化为jpg，文件名改变
        : file.name
    )
    if (thumbHeight) {
      formData.append('thumbHeight', thumbHeight.toString())
    }
    if (thumbWidth) {
      formData.append('thumbWidth', thumbWidth.toString())
    }
    return API.adminTools.upload
      .request({}, formData, {
        headers: {
          'Content-Type': 'multipart/form-data' //