| uniapp 微信公众号H5，超大图片压缩上传，经canvas缩放处理后丢失原图后缀名 | 您所在的位置：网站首页 › java压缩图片 › uniapp 微信公众号H5，超大图片压缩上传，经canvas缩放处理后丢失原图后缀名 |
uniapp 微信公众号H5，超大图片压缩上传，经canvas缩放处理后丢失原图后缀名
|
需求描述： 某物业公司为提升管理水平，营造良好的物业形象与口碑，委托我们为其研发一套智慧社区管理平台， 首先要 为广大业主用户提供线上报修，线上投诉，自助缴费，单据查询，注册与认证等功能；因为让业主安装一个新的APP比较困难， 经商议决定开发微信公众号单页实现以上需求。 技术实现： 由于是基于微信公众号开发单页应用，研发团队决定使用uniapp作为前端开发框架， 后端采用 java springboot 框架， 成果展示：
问题描述： 由于在线报修和在线投诉功能涉及到业主拍照上传， 现在市场的手机像素均比较高，拍出来的照片可达6MB， 甚至十几MB, 图片过大往往导致上传速度过慢，以及渲速度过慢，导致业主失去耐心，无形中就不想使用了，因此需要对特大图片进行压缩处理，工程师经过技术调研决定采用canvas画布对原图进行拆解处理，然后发现使用 uniapp内置 API: uni.uploadFile 上传图片出现时出现了文件名后缀异常，后端接收文件流时也取不到后缀名，无法精准判断文件格式，导致存储异常 解决方案： 对用户上传的图片进行大小判断，单位为字节B, 本文使用2M (2097152字节) 作为临界值，小于该值的图片直接上传至服务器，使用的API为： uni.uploadFile({ url: config.baseUrl + '/foreign/fileUpload', filePath: imgSrc, name: 'uploadFile', formData: { }, success: (res) => { let result = res.data let json = JSON.parse(result) if(json.code != 200){ uni.$u.toast(json.message); return } let imageUrl = json.data.image_url this.pictureList.push({url: imageUrl}) } });filePath为图片存储在本地的临时地址，例如： blob:http://localhost:8080/d47604bf-20d6-40c0-a8ac-0c5b7e3fd566，其中blob表示是二进制类型的大对象，此时虽然没有图片后缀名，但在真机上传时是带有后缀名的，后端可正常取值； 图片大于2M后，则采用canvas压缩技术处理： 使用内置API: uni.getImageInfo 获取原图尺寸，宽度和高度，新建canvas画布对象，将原图绘制到画布中，然后调用绘制函数canvas.toDataURL(urlData.type, 0.7) 对图片进行压缩处理，第一个入参为图片格式，第二个参数为图片质量，这里设置为0.7，达到对原图压缩的目的，拿到上一个步骤返回的base64图片编码，生成新的blob对象，最后用新生成的blob对象生成新的 File对象，异步返回，拿到上一个步骤的File对象，调用内置API: uni.uploadFile({ url: config.baseUrl + '/foreign/fileUpload', file: blobFile, name: 'uploadFile', formData: { }, success: (res) => { let result = res.data let json = JSON.parse(result) if(json.code != 200){ uni.$u.toast(json.message); return } let imageUrl = json.data.image_url this.pictureList.push({url: imageUrl}) } });大家需要注意：此时的关键参数变为file: blobFile, 查看原uniapp API可知：
file的类型为File, 刚好对应咱们上一步骤返回的File对象，也是实现上传的必须参数类型，如果继续使用filePath, 就会出现 服务端取不到图片后缀名的情况，本文的讲解的重点也是这里环节，请各位小伙伴亲自尝试使用， 团队也是再这里踩了坑的，希望能帮助到大家，少走弯路，实现弯道超车 心得体会： 细心的朋友能发现，uniapp官网的API也存在一些让人很是困扰的地方，例如上图中ffilePath是必填项，但没有此项也能正常使用，估计是uniapp官网的文档还没及时更新， 因此，作为前端开发工程师，看懂API很重要， 同样亲自尝试使用API更重要，只有使用了，才能发现其中的问题，积累经验，进而提升自身技能，做一个对企业，对社会有用的人。 需要前后端代码的小伙伴加我个人微信： aoxiaodai 共同学习，一起成长 |
【本文地址】