本文主要讲解基于 Vue + Vant ，实现移动端图片选择，并用 Canvas 压缩图片，最后上传至服务器。还会封装一个工具类，方便直接调用。 定义的最大宽度和最大高度均为 500，如果图片的宽高至少有一个超出了 500，都会被 **等比例 **压缩，不用担心变形。可以根据自…

通常移动端图片上传的时候都会限制在2M以内，但是随着移动设备拍照像素的提高，基本图片都会大于2M，本文基于canvas实现图片指定大小缩放比例压缩

项目基于 vue3 naive 搭建的后台项目，使用 naive 的 upload 不能满足一些合理的特殊需求(拖拽、多张上传的处理)，故封装了自定义上传组件

上篇文章讲了如何上传文件。本文讲细分讲述图片上传、预览等。

项目中多出有上传文件的需求，使用现有的UI框架实现的过程中，不知道什么原因，总会有一些莫名其妙的bug。比如用某上传组件，明明注明（:multiple="false"）,可实际上还是能多选，上传的时候依然发送了多个文件；又比如只要加上了（:file-list="fileList…

图片上传没什么坑，要说的是图片预览首先说下有赞ImagePreview的使用官方文档：https://youzan.github.io/vant/#/zh-CN/image-preview上个预览效果

上面的完整代码在github上，大家可以直接下载运行，有误的地方欢迎大家指正。

现在就单独写一篇博客来记录下实现的整个过程，以及在做的过程中遇到的一些坑。

适合人群:刚起步的前端新人。（前后端未分离的项目）全栈后端老大哥的前端需求(点名批评下jsp)。 别慌。因为对象的特殊，file对象是不会被开发人员所直接捕获(可见)的。但确实存在。 这个对象有一个files属性，返回的就是FileList对象。FileList对象看起来和数组…