使用CompressorJS对上传图片进行前端压缩

compressorjs的Github地址

1. 创建compress.ts文件

import Compressor from 'compressorjs';

export function useCompressImage(image: File, quality: number = 0.8, options: any = {}): Promise<File> {
  return new Promise((resolve, reject) => {
    if (!['image/webp', 'image/jpeg', 'image/png'].includes(image.type)) {
      reject(new Error(`Unsupported file type: ${image.type}.`));
    }
    new Compressor(image, {
      quality,
      maxWidth: 1024,
      maxHeight: 1024,
      convertTypes: ['image/webp'],
      ...options,
      success(result) {
        resolve(new File([result], image.name.split('.').slice(0, -1).join('.') + '.webp', { type: 'image/webp' }));
      },
      error(err) {
        reject(err);
      },
    });
  });
}

1. 使用

import type { UploadCustomRequestOptions, UploadFileInfo } from 'naive-ui';
import { useCompressImage } from '@/hooks/common/compress';

# NaiveUI上传组件示例
const handleUpload = async ({ file, onFinish, onError }: UploadCustomRequestOptions) => {
  try {
    file.file = await useCompressImage(file.file as File);
  } catch (err) {}
  startLoading();
  const formData = new FormData();
  formData.append('file', file.file as File);
  const res = await addApi(formData);
  if (!res.data) {
    onError();
  } else {
    window.$message?.success('上传成功');
    visible.value = false;
    onFinish();
    emit('submitted');
  }
  endLoading();
};

<NUpload
  v-if="visible"
  :default-file-list="fileList"
  directory-dnd
  :max="1"
  :custom-request="handleUpload"
>
  <NUploadDragger>
    <div style="margin-bottom: 12px">
      <NIcon size="48" :depth="3">
        <icon-ph-upload-simple-fill />
      </NIcon>
    </div>
    <NText style="font-size: 16px">
      点击或者拖动文件到该区域来上传
    </NText>
    <NP depth="3" style="margin: 8px 0 0 0">
      图片支持jpg、jpeg、png格式，视频支持mp4格式，视频文件不超过500M
    </NP>
  </NUploadDragger>
</NUpload>