,这是一个非常简单的方案。好吧,这是真的。你为什么要这样做?在移动Web蓬勃发展的今天,有太多的应用需要用户在移动Web上上传图片文件。正因如此,我们要克服一些困难:低网速下上传进度慢,用户体验差且并发高,上传大文件后台处理压力可能更大……当克服一些以上困难,我们也可以问自己几个问题:用户上传的原图真的有必要保存吗??用户可以等多久?或许还有更多……结合上面的一些难点和问题,结合我们的实际案例,我们或许可以这样做——当用户上传图片时,在图片提交到后台之前,对图片进行压缩.图片文件体积缩小后,自然会提示上传速度。同等并发下,后台处理速度也会提升,提升用户体验。可能有童鞋会说,为什么不用一些主流CDN的form功能,直接把文件上传到CDN?当然,你可以选择那种方案,我只是在众多方案中选择一种来使用,或者说这是程序员的天性吗?上面已经说了“用户上传图片时,图片在提??交到后台之前先被压缩”。那我们马上准备好各种工具:localResizeIMG(核心,用于前端压缩图片)Vue.js(前端处理数据,展示逻辑)Bootstrap(不用我多说了吧)怎么做呢?上传工程变更后,使用localResizeIMG按照你期望的方式压缩提交数据后台调用localResizeIMG时,可以指定压缩图片的宽高和质量(详见文档)。至于如何将数据提交到后台,可以参考图书馆wiki中提到的解决方案。一切都很简单。演示地址本例的仓库地址不是本文唯一的解决方案,也不一定是最好的解决方案。使用相关框架/库遇到的问题,可以到对应的Github仓库查看issues或wiki。
