uniapp引入jss-dk开发公众号H5上传多张图片之getLocalImgData的小坑

getLocalImgData:在开发过程中,在IOS上得到的数据是一个图片的base64码,而在安卓机上得到的是没有头部的base64码,且其中可能会包含换行符。这里的解决方案,可能会想到先判断是否IOS机,然后如果是则直接保存和显示数据,否则就给他加头部和替代换行符。但是在判断IOS机的浏览器时又遇到了问题,那就是微信IOS客户端的浏览器有WKWebView和WKWebView两种并且他们获取的变量不一致。觉得这样操作实在太麻烦了,于是换了一种思路来解决,那就时判断获取到的图片数据是否有base64头部
1.点击按钮配置和调用微信相册

// 点击上传图片
			chooseimg() {
				var that = this
				let url = window.location.href
				wxjsreq.request('####', 'post', {
					url
				}).then(res => {
					if (res.data.code == 200) {
						let params = res.data.data
						weixin.config({
							debug: false,
							appId: params.appid,
							timestamp: params.timestamp,
							nonceStr: params.nonceStr,
							signature: params.signature,
							jsApiList: [
								"chooseImage",
								"downloadImage",
								"getLocalImgData",
								"uploadImage"
							]
						})
						weixin.ready(function() {
							weixin.chooseImage({
								count: 5,
								sizeType: ['original', 'compressed'],
								sourceType: ['album'],
								success(res) {
									let localIds = res.localIds
									that.getLocalImgData(localIds, 0)
								}
							})
						})
					}
				})
			},

2.运用递归获取本地图片地址
注意必须是运用递归循环调用本地图片地址还有请求接口。因为请求接口是异步,而for循环是同步的。所以用for循环结束请求可能没结束就有可能之请求一次。

getLocalImgData(arr, index) {
				var that = this
				weixin.getLocalImgData({
					localId: arr[index], // 图片的localID
					success: function(res) {
						let localData = res.localData; // localData是图片的base64数据,可以用img标签显示

						/*
							这里是解决getLocalImgData在安卓和ios系统,出现返回的base64不一样的问题
						*/						
						if (localData.indexOf('data:image') != 0) {
							localData = 'data:image/jpeg;base64,' + localData
						}
						localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
						that.uploadImage(localData)
						index = index + 1
						if (index < arr.length) {
							that.getLocalImgData(arr, index)
				}
			}
		})
	},

3.api请求

uploadImage(localData) {
				var that = this
				wx.request({
					url: '###',
					data: {
						img: localData
					},
					header: {
						"Authorization": wx.getStorageSync('token')
					},
					method: 'POST',
					success: function(res) {
						if (res.data.code == 200) {
							let params = {
								img: res.data.data,
								createBy: that.name,
								memorialId: that.id,
								createDate: formatTime(new Date())
							}
							request('####', 'post', params, {
								"Authorization": wx.getStorageSync('token')
							}, ).then(res => {
								if (res.data.code == 200) {
									that.onReach = false
									that.isrequest = true
									that.pageNo = 1
									that.getRowsImg()
									uni.showToast({
										title: "添加成功",
										icon: "none"
									})
								}
							})
						}
					}
				})
			},

好了到这里就结束了,希望看完了这些对你们工作中有所帮助。在这之前我想说的是我也是个新手这个问题也困扰一天,就是在循环调用请求的时候出现了问题,说白了就是js还没有扎实,以后我会继续努力的。

猜你喜欢

转载自blog.csdn.net/weixin_47330679/article/details/107608581