微信小程序之批量上传并压缩图片的实例代码

具体内容如下所示:

首先,要在.wxml文件里面创建一个canvas,作用是承载压缩的图片,以供上传的时候获取

这个canvas不能隐藏,否则没效果,可以将其移至屏幕外。

然后呢,就是.js文件里面的方法

页面循环展示图片的 //拍照、从相册选择上传 wx.chooseImage({ count: 4,//这个是上传的最大数量,默认为9 sizeType: ['compressed'],//这个可以理解为上传图片质量类型(官方给的),虽然没什么卵用,要不然还要我们自己写压缩做什么 sourceType: ['album','camera'],//这个是图片来源,相册或者相机 success: function (res) { var tempFilePaths = res.tempFilePaths //这个是选择后返回的图片列表 that.getCanvasImg(0,tempFilePaths); //进行压缩 } }); },//压缩并获取图片,这里用了递归的方法解决canvas的draw方法延时的问题 getCanvasImg: function (index,failNum,tempFilePaths){ var that = this; if (index < tempFilePaths.length){ const ctx = wx.createCanvasContext('attendCanvasId'); ctx.drawImage(tempFilePaths[index],300,150); ctx.draw(true,function () { index = index + 1;//上传成功的数量上传成功则加1 wx.canvasToTempFilePath({ canvasId: 'attendCanvasId',success: function success(res) { that.uploadCanvasImg(res.tempFilePath); that.getCanvasImg(index,tempFilePaths); },fail: function (e) { failNum += 1;//失败数量,可以用来提示用户 that.getCanvasImg(inedx,tempFilePaths); } }); }); } },//上传图片 uploadCanvasImg: function (canvasImg){ var that = this; let imgViewList = that.data.imgViewList; var tempImg = canvasImg; wx.uploadFile({ url: app.d.fileServer,//文件服务器的地址 filePath: tempImg,formData: { paramPath: "gift" },name: 'file',success: function (res) { var json2map = JSON.parse(res.data); imgViewList.push(app.d.imageUrlFix + json2map[0].fileUrl); that.setData({ imgViewList: imgViewList,}) } }) },

总结

以上所述是小编给大家介绍的微信小程序之批量上传并压缩图片的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

1. 获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入...
1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用...
QQ小程序支付 Java后端 同学折腾QQ小程序的支付折腾了好几天,没有完成统一下单,因为我做过微信和支付...
前言: 在实际项目开发中我们经常会遇到账号统一的问题,如何在不同端或者是不同的登录方式下保证同一个...
一、前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无...
前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能,但是...