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

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

Compressor.js官方文档

安装

npm install 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,})})}}
)// 文件上传之前对图片进行压缩
const beforeRead = (file) => {return new Promise((resolve, reject) => {new Compressor(file, {// 压缩质量,0-1之间。数字越小,压缩比越高quality: 0.2,success(result) {// 默认返回result是blob类型的文件,可以转成file并返回,交给afterRead钩子进行上传let newFile = new File([result], file.name, { type: file.type })resolve(newFile)},error(err) {reject(err)},})})
}// 文件上传后触发
const afterRead = (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('上传失败')})
}// 文件删除后触发
const deleteFile = () => {emit('onSuccess', state.fileList.map((i) => i.url).join(','))
}// 用于返回信息
useCustomFieldValue(() => state.fileList.map((item) => item.url).join(','))
</script>

示例

Quality原始大小压缩后大小压缩比Description
02.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%-

测试效果

image-20240510141040120

可以看到压缩前的图片大小3.29M,压缩后343KB

在这里插入图片描述

下面是前后的图片对比

原图

测试img

压缩后的图

压缩后的测试img

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/834988.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

财务管理|基于SprinBoot+vue的财务管理系统(源码+数据库+文档)

财务管理系统 目录 基于SprinBootvue的财务管理系统 一、前言 二、系统设计 三、系统功能设计 系统功能实现 1管理员功能模块 2员工功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1…

Docker快速搭建NAS服务——NextCloud

Docker快速搭建NAS服务——NextCloud 文章目录 前言NextCloud的搭建docker-compose文件编写运行及访问 总结 前言 本文主要讲解如何使用docker在本地快速搭建NAS服务&#xff0c;这里主要写如下两种&#xff1a; FileBrowser1&#xff1a;是一个开源的Web文件管理器&#xff…

idea运行项目报错提示:java: 错误: 不支持发行版本 19,让我来看看

在项目经常切换jdk时&#xff0c;这个error经常能遇到“不支持发行版本19”&#xff0c;这个问题修改起来其实很简单&#xff0c;但在真正操作到能够解决问题的那一步前&#xff0c;通常习惯先去查看配置的jdk版本是否是选择正确的&#xff0c;也就是先确认当前这个项目选择的j…

西湖大学英语听力考试音频无线发射系统-英语听力发射系统浅析

西湖大学英语听力考试音频无线发射系统-英语听力发射系统浅析 由北京海特伟业科技任洪卓发布于2024年5月10日 西湖大学&#xff0c;这所矗立于时代前沿的高等学府&#xff0c;始终秉持着创新精神和追求卓越的坚定信念&#xff0c;不断致力于教学质量的提升与学术研究的深化。其…

实体门店超-常规营销获客:218套落地方案/打造引流/锁客/复购/裂变营销

课程内容&#xff1a; 1 记住&#xff0c;生意不好不一定是你产品出了问题,mp4 2 生意人为什么要从产品思维向流量思维转型&#xff0c;社区超市每月多5万.mp4 3 实体老板不懂鱼塘理论只能等死&#xff0c;美业1招锁定275名年用户卡,mp4 4 餐饮赢销八部&#xff0c;帮你引爆…

MathType2024官方版数学公式编辑器功能全面介绍

在数字化学习和科研的浪潮中&#xff0c;数学公式的编辑与展示成为了不可或缺的一部分。MathType&#xff0c;作为一款专业的数学公式编辑器&#xff0c;凭借其强大的功能和便捷的操作&#xff0c;为科研人员、教师、学生等广大用户提供了极大的便利。下面&#xff0c;我们将对…

【Linux】模拟实现bash(简易版)

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

视频号小店应该如何开店呢?详细的开店流程分享给你!

大家好&#xff0c;我是电商小V 视频号小店就是威信视频号团队为咱们商家提供的卖货平台&#xff0c;可以说是支持咱们商家在视频号场景中开店进行经营的模式&#xff0c; 视频号大概的开店流程那就是&#xff1a;找到视频号开店&#xff0c;选择企业入驻&#xff0c;填写信息&…

Three.js的光影

灵活控制光影,能让场景的渲染效果更加丰富逼真,常见的光源:环境光、点光源、平行光和聚光灯。 环境光 环境光是指场景的整体光照效果,由于场景内若干光源的多次反射形成一致的效果,一般是用来为整个场景指定一个基础的亮度。所以环境光是没有明确的光源位置,在各处形成…

5.9代码

1.选素数 从数学来看&#xff0c;n素数*k,k2,3,4...&#xff0c;而我们要进行两次&#xff0c;由于有多个解时我们要选最小的&#xff0c;所以要找到最大的素数&#xff0c;但是这个最大素数要小于等于n/2的整数&#xff0c;然后中间那一次的n的选择要选比最大素数大的最少的合…

【二分查找 滑动窗口】100257找出唯一性数组的中位数

本文涉及知识点 二分查找算法合集 C算法&#xff1a;滑动窗口总结 LeetCode 100257找出唯一性数组的中位数 给你一个整数数组 nums 。数组 nums 的 唯一性数组 是一个按元素从小到大排序的数组&#xff0c;包含了 nums 的所有非空子数组中不同元素的个数。 换句话说&#xf…

java图片水印字体乱码问题

问题描述&#xff1a;在linux Centos-7.5_64bit系统的其他服务器上不乱码&#xff0c;在部署项目的正式服务器乱码 水印字体设置是 微软雅黑 Font wordFont new Font("微软雅黑", Font.ITALIC,(srcImgHeightsrcImgWidth)/50); 一.Springboot项目&#xff0c;部署在…

高效视频剪辑:批量剪辑添加srt字幕,快速制作专业视频

在视频制作过程中&#xff0c;字幕扮演着至关重要的角色&#xff0c;它们不仅能增强观众对视频内容的理解&#xff0c;还能提高视频的观感体验。然而&#xff0c;手动为每一个视频添加字幕是一项既耗时又繁琐的任务。现在有了云炫AI智剪和技巧&#xff0c;我们可以轻松地实现批…

什么是职称评审?如何申报?怎么获取职称电子证书?

目录 一、什么是职称?什么是职称评审? 二、申报人申报职称评审要经过哪些流程?

kafka的简单使用

Kafka是一个分布式的流处理平台&#xff0c;主要用于处理高吞吐量的实时数据流。在Kafka中&#xff0c;有一些重要的概念需要了解&#xff0c;包括以下几个&#xff1a; Broker&#xff1a;Kafka集群中的每个服务器节点被称为Broker。每个Broker负责处理一部分的消息流量&#…

Photoshop中选区工具的应用

Photoshop中选区工具的应用 前言Photoshop中选区工具的基本操作创建选区的工具及方法选择、取消、隐藏选区选区的增加、减少选区的应用变换扩大选取与选取相似 Photoshop中采用快速选择工具来创建选区Photoshop中采用色彩范围命令来创建选区Photoshop中采用快速蒙版来创建选区P…

2025上海礼品工艺品展览会

2025第25届上海国际礼品及家居用品展览会&#xff08;上海礼品展&#xff09; CGHE上海礼品展|上海国际礼品展|上海国际家居用品展 布展时间&#xff1a;2025年6月27-28日 展览时间&#xff1a;2025年6月29-7月1日 撤展时间&#xff1a;2025年7月1日下午14:00 展览地址&#xf…

缓存数据库有哪些

缓存数据库主要用于提高数据访问速度和降低数据库负载&#xff0c;它们通常存储频繁访问的数据副本&#xff0c;以减少对主数据库的直接请求。以下是一些常用的缓存数据库技术&#xff1a; Redis: Redis 是一个开源的、基于内存的数据结构存储系统&#xff0c;可用作数据库、缓…

安全加固

目录 1.文件锁定管理 2.设置用户账户有效期 3.查看并清除命令历史记录 4.设置用户超时登出时间 5.用户切换 6.用户提权 7.禁用重启热键CtrlAltDel 8.设置单用户模式密码 9.调整BIOS引导设置 10.禁止root用户从本地登录&#xff1a; 11.禁止root用户通过ss…

负载均衡总结

四层负载均衡&#xff08;基于IP端口的负载均衡&#xff09; 实现四层负载均衡的软件有&#xff1a; F5&#xff1a;硬件负载均衡器&#xff0c;功能很好&#xff0c;但是成本很高。 lvs&#xff1a;重量级的四层负载软件 nginx&#xff1a;轻量级的四层负载软件&#xff0c;带…