结合Vue.js的前端压缩图片方案
2023-09-27 14:21:20 时间
这是一个很简单的方案。嗯,是真的。
为什么要这么做?
在移动Web蓬勃发展的今天,有太多太多的应用需要让用户在移动Web上传图片文件了,正因如此,我们有些困难必须去攻克:
低网速下上传进度缓慢,用户体验差 高并发下,后台处理较大的上传文件压力大 或许有更多...在攻克上面的一些困难时,我们也可以给自己一些疑问:
真的有必要保存用户上传的原图吗? 用户还能等多久? 或许还有更多...结合上面的一些困难和疑问,再结合我们实际的案例,我们或许可以这样做 —— 在用户上传图片时,图片被提交到后台之前,就对图片进行压缩处理。图片文件大小减小后,上传速度自然会提示,在同样的并发下,后台处理的速度也会得到提升,用户体验得到提升。
有童鞋可能会说,为什么不使用一些主流CDN的表单功能,直接把文件上传到CDN去?当然,完全可以选择那种方案,我只是在众多的方案中选择了一个来用而已,又或者说这是程序员的天性?
准备
上面已经说了 “在用户上传图片时,图片被提交到后台之前,就对图片进行压缩处理。”,那我们马上准备下各种工具吧:
localResizeIMG(核心,用于在前端对图片进行压缩) Vue.js(处理前端的数据,展现逻辑) Bootstrap(还要我多说?)怎么做?
上传项目变更后,使用localResizeIMG进行压缩 把数据通过自己期望的方式提交到后台localResizeIMG在调用时,就可以指定压缩后图片的宽度高度以及质量(详细参考文档),至于要怎么把数据提交到后台,可以参考该库的wiki中提到的方案,一切都很简单。
本文的解决方法并不是唯一,也不一定是最好,在使用相关的框架/库时遇到的问题,可以去相应的Github仓库查看issue或者wiki。
作者:mjw 来源:51CTO相关文章
- vue.js--基础 v-bind绑定属性使用
- Why not always use the index as the key in a vue.js for loop?
- vue - webpack.dev.conf.js for CopyWebpackPlugin
- vue - check-versions.js for child_process
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- 如何在其他js 引入main.js 中 vue 的实例?
- Vue - 搜索关键字标红高亮(用户输入关键词搜索后,在搜索结果的列表标题上匹配并标红加粗)怎么使内容文本标红高亮的最详细教程,Nuxt.js uni-app 也适用,搜索功能及搜索结果关键字高亮源码
- JavaScript - 批量替换对象数组中的属性名(快速将二维数组对象中的键名进行大量替换)传入原来的属性名和要修改的属性名即可,适用于 js vue nuxt uniapp等项目,详细示例代码教程
- JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目
- JavaScript - 判断今天是星期几(周几 / 礼拜几),适用于 Vue.js uni-app Nuxt.js 等前端项目
- vue父组件获取子组件单多个输入框(input)的值
- 【前端】Vue文件html、js、css分离
- (2)打鸡儿教你Vue.js
- Web前端-Vue.js必备框架(五)
- Web前端-Vue.js必备框架(五)
- Web前端-Vue.js必备框架(四)
- 《WEB安全渗透测试》(19)Vue.js中的XSS攻击
- vue中的main.js打开直接报错问题解决
- 使用webpack+vue.js构建前端工程化
- vue 设置自动打开浏览器
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- electron-vue搭建项目
- 【前端】Vue.js资源分享
- Vue.js系列之二Vue实例
- Vue.js系列之一初识Vue
- Vue packages version mismatch解决方案
- SpringBoot+Vue.js实现大文件分片上传、断点续传与极速秒传