vue2/3 - 详细实现上传图像压缩并上传到服务器，图片上传服务器前进行压缩减少大小并保持图片清晰度，vue组件库上传照片获得file时进行图片的压缩减少图像的大小功能（详细源码，复制开箱即用！）

已于 2025-01-16 15:16:46 修改
阅读量3.8k 收藏 8
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端组件与功能(开箱即用) vue常见问题解决 文章标签： vue图片压缩功能插件 vue如何降低图片大小并不失真 vue上传头像并压缩图片 vue图片上传前进行压缩 vue上传服务器时压缩减少图片 vue降低图片的大小并上传 upload组件上传图片压缩
于 2023-07-31 15:36:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/132023209
在Vue项目中，通过CompressImageUtils工具类实现图片在上传前的压缩，保证不降低清晰度。该工具类采用等比例压缩，适应不同尺寸图片，针对大图效果显著，但可能使小图变大。解决方案是在上传时判断压缩后图片大小，若大于原图则上传原图。提供详细的源码和使用教程。

效果图

在vue2 / vue3项目开发中，在本地上传图片后获得file对象文件，在图片上传的时候进行压缩减少文件大小（并且不降低图片清晰度）。

在这里插入图片描述
在这里插入图片描述

实现代码

了解本专栏 订阅专栏 解锁全文
Vue 图片压缩并上传至服务器功能
11-21
本文主要讲解基于 Vue + Vant ，实现移动端图片选择，并用 Canvas 压缩图片，最后上传至服务器。还会封装一个工具类，方便直接调用。 一、工具类封装 废话不多说先上代码，封装一个 CompressImageUtils 工具类： ** * 图片压缩工具类 * 最大高度和最大宽度都为 500，如果超出大小将等比例缩放。 * * 注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。 */ // 将base64转换为blob export function convertBase64UrlToBlob(urlData) { le
vue 图片上传压缩（vue+Vant+image-compressor）
codingLeader的博客
03-07 7454
vue 图片上传压缩（vue+Vant+image-compressor）
Vue图片压缩方案
最新发布
han2434的博客
10-21 725
Vue项目中处理大图片上传的优化方案：通过Canvas API实现前端图片压缩，可缩减60-85%体积。核心方法是调整图片尺寸(maxWidth/maxHeight)和质量(quality参数)，保持比例的同时减小文件大小。代码提供了完整的压缩函数和Vue3组件实现，包含预览功能和文件大小对比。该方案是前端优化图片上传体验的有效手段。
vue图片上传压缩
10-18
在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了，正因如此，我们有些困难必须去攻克： 低网速下上传进度缓慢，用户体验差 高并发下，后台处理较大的上传文件压力大 或许有更多...
vue图片压缩上传
sunddy_x的博客
03-16 9022
前言 之前图片压缩是公司前辈留下的一个js方法，采用的回调函数处理。最近一个项目为了优化用户体验，在图片上传失败后要根据接口返回的状态值更改页面UI，此时该js方法就会出现异常，于是我找到了 image-conversion。 安装 npm i image-conversion --save 或者 yarn add image-conversion 引入 import * as imageConversion from 'image-conversion' 或者 import {compress, c
改造vue-quill-editor(二)：10秒搞定自定义上传图片到服务器
weixin_34116110的博客
01-03 624
原生上传图片到服务器 上次给大家分享过下面的文章结合element-ui上传图片到服务器基于上面的原理，我又替大家把整个配置封装好了，大家在使用的时候直接引入配置文件即可。无需引入element-ui，并且增加了部分功能： 可限制图片上传的格式 可限制图片的大小 可重写图片上传成功失败触发的事件 具体使用如下 引入自定义配置文件 vu...
Vue图片压缩上传
龘
09-03 703
一、图片压缩 图片压缩工具类最大高度和最大宽度都为 500，如果超出大小将等比例缩放。 注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。 // 将base64转换为blob export function convertBase64UrlToBlob(urlData) { let arr = urlData.split(',') let mime = arr[0].match(/:(.*?);/)[1] let bstr = atob(arr[1]
vue2压缩图片上传
m178398家里有只小肥猫
11-26 614
【代码】vue2压缩图片上传。
localResizeIMG图片上传插件支持原图与压缩对比
“图片上传插件localResizeIMG”是一个专注于前端图像处理与优化的JavaScript工具，其核心功能是实现用户在浏览器端对本地图片进行无损或有损压缩后再上传，从而有效减少服务器带宽压力、提升网页性能和用户体验。...
基于Vue3与ant-design-vue2的图书借阅系统源码
本项目“基于Vue3和ant-design-vue2的图书管理借阅系统设计源码”是一个典型的现代前端Web应用开发实践案例，充分体现了当前主流前端技术栈在实际业务场景中的综合运用。该系统以Vue3为核心框架，结合ant-design-vue...
图片裁剪压缩上传Demo无依赖完整案例
图片上传剪切这一功能在现代Web开发中具有极高的实用价值，尤其是在涉及用户头像上传、商品图片处理、内容发布系统等场景下，前端对图片进行裁剪与压缩不仅能提升用户体验，还能显著减少服务器带宽压力和存储成本。...
头像压缩切割上传
10-10
这个过程可能涉及到图片的质量控制，以保持清晰度的同时减小文件大小。前端可以使用插件如jQuery-File-Upload或vue-uploader提供友好的用户体验，后端需要处理文件接收并保存到适当的位置。 5. **Thumblinal**：...
vue3上传图片，进行图片压缩（image-compressor.js）
Gy_gsdsb的博客
07-15 3943
在图片上传的过程中，如果图片体量过大，会很影响效率，并且在做某些特殊业务的时候，可能对上传图片的大小有限制，我们要么就对上传的文件进行限制，要么就对图片进行压缩后再上传，我这里采用了compressor.js。这样我们就对不同大小的图片进行了一个简单判断，让其大部分保持在1MB左右，各位小伙伴可以根据自身实际情况写不同的算法，这里的。这样，我们就上传了一个压缩的图片，最大可以上传9MB的，并且会把较大的图片尽可能的压缩在1MB左右。就是压缩比例，一个7MB左右的图片， 在0.1压缩后，会变成七百KB左右。
vue实现压缩上传图片
weixin_48205715的博客
07-16 1934
写压缩方法 compressImg(file) { var files var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2) var read = new FileReader() read.readAsDataURL(file) return new Promise(function(resolve, reject) { read.
学习Vue中图片上传前进行压缩的实现方法
李长渊的博客
05-31 1964
学习Vue中图片上传前进行压缩的实现方法
vue/H5图片压缩/压缩后上传
love_weiai的博客
03-21 631
需要先把上方代码进行封装，在utils创建js文件，我的命名为（common.js）,将上方代码复制到js文件内，然后把封装的方法给抛出暴漏出来进行调用。如果有其他方式也可以抛出也可以，或者直接写在vue文件内，因为项目中使用比较多，所以进行了封装。因为目前使用的H5,只写了uniapp+Uview插件进行压缩上传。图片压缩：通过canvas进行图片压缩。在data中定义压缩大小限制。使用Uview上传组件。在vue文件中进行调用。
vue 实现上传前图片压缩功能
热门推荐
KingCherry的博客
06-20 1万+
首先，因为我这边项目是迭代的，只需要添加一个压缩功能，所以我这边是从获取到file之后开始写的。 1.前端： 附件上传 2.return{ headerImage:’’, picValue:’’, } 3.上传前压缩的方法 uploadSectionFile(f) { // 附件上传 let self = this; let Orientation; let ndata; if(f.fi...
vue 上传图片进行压缩图片
qq_40250507的博客
09-25 2041
afterRead(file){ if(this.fileList.length > 1){ this.fileList.splice(1); this.$msg({ text:'只能选择这么多!', type:'info' }) return false;
vue2上传图片image-conversion压缩
不会写代码的前端
01-17 1641
其实在npm中使用已经说得很明白了，我这里记录一下跟element ui上传组件配合使用。上传前方法中处理压缩逻辑，压缩质量参数，我单独封装了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

饭桶兔子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值