uniapp 微信小程序开发 图片上传压缩
uniapp 微信小程序开发 图片上传压缩
- 安卓上传图片并压缩
- 思路
- 全部代码
安卓上传图片并压缩
由于后端接口对图片的大小有限制，所以在上传图片是需要压缩处理：
uni.chooseImage({count: 1, // 头像只上传1张sizeType: ['compressed'], //指定压缩图，success: async (chooseImageRes) => {} catch (e) {console.log(e)}},fail(err) {console.log(err)}})
但是最后真机测试后发现，iOS会自动压缩上传，安卓机并不会（测试了OPPO、荣耀、小米），一个5M的图片，iOS上传后会自动压缩为102k，安卓完全不会压缩。所以需要根据机型来判断是否需要需要压缩。
思路
条件编译
如果是微信小程序，判断机型，如果为安卓则压缩，使用canvas压缩（这里应该也可以使用自带的uni.compressImage，但是由于我们项目后端对类型有判断，而compressImage返回的图片路径是无后缀名的，所以弃用了）；
如果是app端则使用5+（plus.zip.compressImage）；
全部代码
const common = {/*** 清除文件*/clearFile() {return new Promise((resolve) => {// 把文件删除后再写进，防止超过最大范围而无法写入const fsm = wx.getFileSystemManager(); //文件管理器fsm.readdir({ // 获取文件列表dirPath: wx.env.USER_DATA_PATH, // 当时写入的文件夹success(res) { console.log(res)res.files.forEach((el) => { // 遍历文件列表里的数据// 删除存储的垃圾数据fsm.unlink({filePath: `${wx.env.USER_DATA_PATH}/${el}`, // 这里注意。文件夹也要加上，如果直接文件名的话会无法找到这个文件fail(e) {console.log('readdir文件删除失败：', e)}});})resolve()}})})},/*** 获取图片信息* @param {string} imgObj 图片对象path* @param {function} fn 回调函数* @returns {ojbect} cbParams * {* height: 722,* width: 1366,* type: 'png',* path: '',* orientation: 'up',* errMsg: ''* }*/getImageObject(src, fn) {uni.getImageInfo({src: src,success(res) {console.log(res)fn(res)}})},/*** 压缩图片* @param {object} img 图片* @param {function} fn 回调函数*/compressImg(img, fn, fail) {//#ifdef MP-WEIXIN//获取canvasconst selectorQuery = uni.createSelectorQuery()selectorQuery.select('#canvas').fields({//返回节点信息，文档中说只有当canvas的type为weldg时才能生效，但是经过测试是可以用的node: true,size: true}).exec(res => {console.log(res)const canvas = res[0].nodeconst ctx = canvas.getContext('2d')canvas.height = img.heightcanvas.width = img.widthlet seal = canvas.createImage();seal.src = img.path;seal.onload = () => {//画图ctx.drawImage(seal, 0, 0, img.width, img.height)//压缩const url = canvas.toDataURL('image/jpeg',0.5)//清除历史文件，否则可能会导致无法写入this.clearFile().then(() => {const FILE_BASE_NAME = 'tmp_base64src';const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(url) || [];if (!format) {fail && fail({errMsg: 'ERROR_BASE64SRC_PARSE'});return;}const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;//将base64转为文件流，输出临时文件上传const buffer = uni.base64ToArrayBuffer(bodyData);console.log('filePath',filePath)const fsm = wx.getFileSystemManager();fsm.writeFile({filePath,data: buffer,encoding: 'binary',success() {fn(filePath)},fail(err) {fail && fail(err)}})})}})//#endif//#ifndef MP-WEIXIN//5+自带的图片压缩plus.zip.compressImage({src: img.path,quality: 0.1,width: 50,height: 50}, (res) => {console.log(res)fn(res.target)}, (err) => {console.log(err)fail && fail(err)});//#endif}
}
页面使用示例：
//template
<canvas canvas-id="canvas" id="canvas" type="2d" style="display: none;"></canvas>
//methods/*** 上传头像触点*/uploadIcon() {let _this = this;uni.chooseImage({count: 1, // 头像只上传1张sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有success: async (chooseImageRes) => {try {const tempFilePaths = chooseImageRes.tempFilePaths;//#ifdef MP-WEIXIN//ios小程序会自动压缩if (this.isIphoneX('iPhone')) {_this.uploadFile(tempFilePaths[0])} else {_this.getImage(tempFilePaths[0], true)}//#endif//#ifndef MP-WEIXIN_this.getImage(tempFilePaths[0], true)//#endif} catch (e) {console.log(e)_this.$common.checker.alertTip('图片压缩失败!');}},fail(err) {console.log(err)}})},/*** @param {Object} type 是否需要压缩*/getImage(file, type=false) {if (type) {this.$common.utils.getImageObject(file, img => {this.$common.utils.compressImg(img, res => {this.uploadFile(res)}, (err) => {this.$common.checker.alertTip(err.errMsg || '图片压缩失败');})}) } else {this.uploadFile(file)}},uploadFile(file) {let _this = this;uni.uploadFile({url: configer.uploadUrl, // 上传地址filePath: file,name: 'file',formData: {uploadType: 'aaa'},header: {'content-type': 'application/json'},success: (res) => {//上传结果的处理},fail: (err) => {console.log(err)}});}
uniapp 微信小程序开发 图片上传压缩相关推荐
- php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除 点击上传作业 在js文件中: Page({ / ...
- 微信小程序 多图片上传 支持预览 删除 设置数量上限
github地址: https://github.com/Volcano-Yang/miniprogram-picture-upload Miniprogram-Picture-Upload 努力帮助 ...
- 【微信小程序】图片上传组件“mp-uploader“(weui)
使用示例 wxml <mp-uploader files="{{files}}" max-count="{{maximgs}}" max-size=& ...
- 微信小程序 删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
- 微信小程序多图片上传全栈实战
本篇教程技术栈:springBoot(Java后端)+ 微信小程序.完整的图片上传教程. 页面截图,点击图片右上角按钮可以删除图片. 1.图片上传需要使用wx.uploadFile(Object o ...
- 微信小程序之图片上传、多图上传、头像上传、头像获取、图片上传失败问题解决
小程序用户授权获取用户头像,需点击才可以让用户选择是否授权. 图片上传失败问题解决 图片上传 一定要记得修改合法域名,不然会失败,而且找不到报错信息哟!并且域名采用 https 点击,用户授权,获取用 ...
- 微信小程序实现图片上传（清晰版）
在wxml文件中添加一个按钮和一个image标签用于显示上传的图片 <view><button bindtap="chooseImage">选择图片< ...
- 微信小程序之图片上传之巨坑
写这个随笔的目的是想让遇到这个坑的人少点时间去填坑 先附上小程序前端和java端代码 startUpload: function(){ wx.chooseImage({ success: functi ...
- 微信小程序自定义图片上传组件
实现功能: 点击上传按钮可上传图片,并且可定义最多可上传的图片数量.限制图片的大小.类型和来源. 点击图片可预览图片. 点击删除按钮可删除图片. <!-- image-upload.wxml - ...
最新文章
- HDU - 6118 度度熊的交易计划(最大费用可行流)
- (原創) 如何讀取/寫入文字檔? (IC Design) (Verilog)
- VS2010 RTM
- 博客园开始对X++语言语法高亮的支持
- k8s dashboard_k8s集群部署Dashboard
- 软件的极简主义的三个大敌：配置文件，冗余的参数，和大量复杂的接口。
- 智能仓储管理系统分析？
- 基于Posfix的邮件服务器维护总结
- springBoot项目启动后无法访问index.html首页或其它controller
- 在 Flink 算子中使用多线程如何保证不丢数据？
- XZ_icp金融经营许可证相关的文档和相关问题
- 数学画图软件_云山小学进行信息技术培训：画图软件的小妙用
- 基于Vue2和jsmind.js实现思维导图
- TwinCAT3入门教程1——TC3系统安装
- Webservice接口调用工具类
- cJSON库的使用（一）
- 供应链金融运营研究 -----内容运营
- oracle与用友的差别,用友U9 PK SAP/Oracle：敢比就是赢
- 【微信小程序】创建自己的小程序
- Dev-C++下面的编译状态栏信息不显示