摘要：图片文件大小减小后，上传速度自然会提升，在同样的并发下，后台处理的速度也会得到提升，用户体验得到提升。
这是一个很简单的方案。嗯，是真的。
为什么要这么做？在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了，正因如此，我们有些困难必须去攻克：
低网速下上传进度缓慢，用户体验差
高并发下，后台处理较大的上传文件压力大
或许有更多...
在攻克上面的一些困难时，我们也可以给自己一些疑问：
真的有必要保存用户上传的原图吗？
用户还能等多久？
或许还有更多...
结合上面的一些困难和疑问，再结合我们实际的案例，我们或许可以这样做 —— 在用户上传图片时，图片被提交到后台之前，就对图片进行压缩处理。图片文件大小减小后，上传速度自然会提升，在同样的并发下，后台处理的速度也会得到提升，用户体验得到提升。
有童鞋可能会说，为什么不使用一些主流CDN的表单功能，直接把文件上传到CDN去？当然，完全可以选择那种方案，我只是在众多的方案中选择了一个来用而已，又或者说这是程序员的天性？
准备上面已经说了 “在用户上传图片时，图片被提交到后台之前，就对图片进行压缩处理。”，那我们马上准备下各种工具吧：
localResizeIMG（核心，用于在前端对图片进行压缩）
Vue.js（处理前端的数据，展现逻辑）
Bootstrap（还要我多说？）
怎么做？上传项目变更后，使用localResizeIMG进行压缩
把数据通过自己期望的方式提交到后台
localResizeIMG在调用时，就可以指定压缩后图片的宽度高度以及质量（详细参考文档），至于要怎么把数据提交到后台，可以参考该库的wiki中提到的方案，一切都很简单。
演示地址
这个例子的仓库地址
本文的解决方法并不是唯一，也不一定是最好，在使用相关的框架/库时遇到的问题，可以去相应的Github仓库查看issue或者wiki。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80743.html
摘要：工程实践立足实践，提示实际水平内联函数与性能很多关于性能优化的文章都会谈及内联函数，其也是常见的被诟病为拖慢性能表现的元凶之一不过本文却是打破砂锅问到底，论证了内联函数并不一定就会拖慢性能，过度的性能优化反而会有损于应用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...
摘要：哈哈主要还是我嫌麻烦四上传图片这里的页面样式，图片压缩和预览都和上面一样，这里我主要配置一下的，让接口能够成功上传。如果想让用户有更好的体验，可以对图片进行一下压缩和本地预览。 一、通过Form表单提交上传 HTML enctype属性必不可少 上面一种方法通过表单自有属性进行提交，看似简单，但是也有其最大的缺点，那就是提交...
摘要：哈哈主要还是我嫌麻烦四上传图片这里的页面样式，图片压缩和预览都和上面一样，这里我主要配置一下的，让接口能够成功上传。如果想让用户有更好的体验，可以对图片进行一下压缩和本地预览。 一、通过Form表单提交上传 HTML enctype属性必不可少 上面一种方法通过表单自有属性进行提交，看似简单，但是也有其最大的缺点，那就是提交...
摘要：但是还是会阻塞事件，所以会可能在触发前或后执行，但是一定会在事件前触发。当监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到属性中，达到懒加载的效果。当代码执行，线程被冻结。所以的性能让变慢。 概括 涉及到的分类 网络层面 构建层面 浏览器渲染层面 服务端层面 涉及到的功能点 资源的合并与压缩 图片编解码原理和类型选择 浏览器渲染机制 懒加载预加载 浏览器存储 缓存机制...
阅读 3488·2021-11-17 17:01
阅读 3899·2021-11-08 13:12
阅读 2451·2021-10-08 10:04
阅读 648·2021-09-29 09:35
阅读 1377·2021-09-26 10:12
阅读 1953·2021-09-07 09:58
阅读 1937·2019-08-30 15:55
阅读 2117·2019-08-30 13:14
