uniapp 微信公众号H5，超大图片压缩上传，经canvas缩放处理后丢失原图后缀名

需求描述：

某物业公司为提升管理水平，营造良好的物业形象与口碑，委托我们为其研发一套智慧社区管理平台， 首先要 为广大业主用户提供线上报修，线上投诉，自助缴费，单据查询，注册与认证等功能；因为让业主安装一个新的APP比较困难， 经商议决定开发微信公众号单页实现以上需求。

技术实现：

由于是基于微信公众号开发单页应用，研发团队决定使用uniapp作为前端开发框架，  后端采用 java springboot 框架，

成果展示：

 

问题描述：

由于在线报修和在线投诉功能涉及到业主拍照上传， 现在市场的手机像素均比较高，拍出来的照片可达6MB， 甚至十几MB, 图片过大往往导致上传速度过慢，以及渲速度过慢，导致业主失去耐心，无形中就不想使用了，因此需要对特大图片进行压缩处理，工程师经过技术调研决定采用canvas画布对原图进行拆解处理，然后发现使用 uniapp内置 API: uni.uploadFile  上传图片出现时出现了文件名后缀异常，后端接收文件流时也取不到后缀名，无法精准判断文件格式，导致存储异常

解决方案：

1. 对用户上传的图片进行大小判断，单位为字节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表示是二进制类型的大对象，此时虽然没有图片后缀名，但在真机上传时是带有后缀名的，后端可正常取值；

1. 图片大于2M后，则采用canvas压缩技术处理：

1. 使用内置API: uni.getImageInfo  获取原图尺寸，宽度和高度，
2. 新建canvas画布对象，将原图绘制到画布中，然后调用绘制函数canvas.toDataURL(urlData.type, 0.7) 对图片进行压缩处理，第一个入参为图片格式，第二个参数为图片质量，这里设置为0.7，达到对原图压缩的目的，
3. 拿到上一个步骤返回的base64图片编码，生成新的blob对象，最后用新生成的blob对象生成新的 File对象，异步返回，
4. 拿到上一个步骤的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       

共同学习，一起成长