微信小程序选择图片并转base64

一般上传图片给后台更多情况是通过base64的形式，这样占存小，使用时也可以减少了服务器访问次数。微信官方提供的API又不支持上传多个文件，所以如果是上传图片的话，使用base64编码字符串是个不错的办法。

相关API

wx.chooseImage(Object object)

功能描述

从本地相册选择图片或使用相机拍照。

wx.getImageInfo(Object object)

功能描述

获取图片信息。网络图片需先配置 download 域名才能生效。

FileSystemManager.readFile(Object object)

功能描述

读取本地文件内容。单个文件大小上限为100M。

微信小程序选择图片并转base64，代码如下：

// 选择图片并自动转成base64编码（count：文件可选数，imgType：转base64时图片类型）chooseImageToBase64(count) {return new Promise((resolve, reject) => {wx.chooseImage({count,sizeType: 'compressed',success: (res) => {console.log(res)var tempFilePaths = res.tempFilePathsvar base64ImgArr = [];tempFilePaths.forEach((item) => {wx.getImageInfo({src: item,success(imageInfo) {var imgType = imageInfo.typewx.getFileSystemManager().readFile({filePath: item, //选择图片返回的相对路径encoding: "base64", //这个是很重要的success: res => { //成功的回调//返回base64格式var base64Str = 'data:image/' + imgType + ';base64,' + res.database64ImgArr.push(base64Str)if (base64ImgArr.length == tempFilePaths.length) {resolve(base64ImgArr)}},fail: err => {console.log(err)reject(err)}})}})})},fail: (err) => {console.log(err)}})})},

格式有点套娃，可以自己优化下！

this.chooseImageToBase64(1).then(res=>{console.log(res)//图片base64 （数组）//.....
})

uni-app 把 wx 改成 uni 也可以用

微信小程序选择图片并转base64相关推荐

微信小程序选择图片（相册中选择/相机拍摄）
微信小程序中关于选择函数有专门的函数: wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照. 参数 Object object 属性类型默认值必填说明 ...
微信小程序 - 选择图片、预览图片、删除图片
为什么80%的码农都做不了架构师?>>> 小程序开发中你可能会遇到上传的图片首先会选择图片之后预览看下或者不满意需要删除图片,才会提交吧,这样应该是一个比较好的处理方式. 微信 ...
微信小程序选择图片和预览图片
作者>:燕潇洒视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage({}) 此方法是用来选择图片的方法,具体使用如下: data: {av ...
微信小程序——选择图片/拍照
昨天有同学问我微信选择图片/拍照怎么做,其实这个没啥坑,把API看懂了就会了:这里写个简单的使用例子. 使用的微信API: 1.选择图片:wx.chooseImage 2.图片全屏预览:wx.prev ...
微信小程序选择图片，读取手机相册或者相册
//点击图片选择手机相册或者电脑本地图片 changeAvatar: function(e) { var _this = this wx.chooseImage({ c ...
微信小程序——选择图片，上传图片，点击查看大图，删除图片
Page({data: {images: [],count: 3, //设置最多三张图片},chooseImage: function () {var self = this;var images = ...
微信小程序临时图片文件转Base64
wx.chooseImage({count:1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success ...
微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...
微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...

微信小程序选择图片并转base64

相关API

wx.chooseImage(Object object)

wx.getImageInfo(Object object)

FileSystemManager.readFile(Object object)

微信小程序选择图片并转base64相关推荐

最新文章

热门文章