前端使用Compressor.js实现图片压缩上传

Compressor.js官方文档

安装

npminstall compressorjs

使用

在使用ElementUI或者其他UI框架的上传组件时，都会有上传之前的钩子函数，在这个函数中可以拿到原始file，这里我用VantUI的上传做演示

afterRead 函数是上传之前的钩子，可以获取到原始file

<template><div><van-uploader
      :max-count="prop.limit"
      v-model="state.fileList":after-read="afterRead":before-read="beforeRead"
      @delete="deleteFile"/></div></template><script setup>import{ reactive, defineEmits, defineProps, watch }from'vue'import{ FileUploadFun }from'@/api/index.js'import{ useCustomFieldValue }from'@vant/use'import{ Toast }from'vant'import Compressor from'compressorjs'const prop =defineProps({url:{type: String,default:'',},limit:{type: Number,default:5,},})const emit =defineEmits(['onSuccess'])const state =reactive({fileList:[],})watch(()=> prop.url,()=>{if(prop.url){
      state.fileList =[]
      prop.url.split(',').forEach((item)=>{
        state.fileList.push({url: item,})})}})// 文件上传之前对图片进行压缩constbeforeRead=(file)=>{returnnewPromise((resolve, reject)=>{newCompressor(file,{// 压缩质量，0-1之间。数字越小，压缩比越高quality:0.2,success(result){// 默认返回result是blob类型的文件，可以转成file并返回，交给afterRead钩子进行上传let newFile =newFile([result], file.name,{type: file.type })resolve(newFile)},error(err){reject(err)},})})}// 文件上传后触发constafterRead=(file)=>{
  file.status ='uploading'
  file.message ='上传中...'FileUploadFun(file.file).then((res)=>{
      file.status ='done'
      file.message ='上传成功'let urls = state.fileList.map((i)=> i.url)
      urls.pop()
      urls.push(res.data.url)// 通知外界上传成功emit('onSuccess', urls.join(','))}).catch(()=>{
      state.fileList.pop()
      file.status ='done'Toast('上传失败')})}// 文件删除后触发constdeleteFile=()=>{emit('onSuccess', state.fileList.map((i)=> i.url).join(','))}// 用于返回信息useCustomFieldValue(()=> state.fileList.map((item)=> item.url).join(','))</script>

示例
Quality原始大小压缩后大小压缩比Description02.12 MB114.61 KB94.72%-0.22.12 MB349.57 KB83.90%-0.42.12 MB517.10 KB76.18%-0.62.12 MB694.99 KB67.99%推荐0.82.12 MB1.14 MB46.41%推荐12.12 MB2.12 MB0%不推荐NaN2.12 MB2.01 MB5.02%-
测试效果