uni-app h5公众号 上传多张图片问题

因uni-app的api不支持安卓手机上传多张图片所以要单独引入用到jssdk(uni-app的底层不是jssdk)

第一步:引入jssdk npm i weixin-js-sdk
文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

第二步:授权wx.config 要先在公众号里面配置业务域名以及ip白名单 否则授权会失败
getLocalImgData特别注意就是因为是异步请求所以必须先执行完上一步才能进行下去 不然会出问题

// 在调用SDK时,通过URL获取签名
					let url = '';
					if (navigator.userAgent.indexOf('iPhone') !== -1) {
						// IOS 记录微信菜单打开时的url
						url = window.location.href.split('#')[0];
					} else {
						// 安卓 记录当前使用SDK的页面的url
						const {
							href
						} = window.location;
						url = href.split('#')[0];
					}
					//res后台返回的授权数据
					wx.config({
							debug: false,
							appId: xxx,
							timestamp: res.data.timestamp,
							nonceStr: res.data.noncestr,
							signature: res.data.signature,
							jsApiList: [
								'checkJsApi',
								'chooseImage',
								'getLocalImgData',
							]
						});

第三步 chooseImage上传图片

wx.ready(function() {
						wx.chooseImage({
							count: 9, // 默认9
							sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
							sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
							success: function(res) {
								self.readImages(res.localIds);
							},
						});
					})
					async readImages(localIds) {
				var self = this;
				let fileArray = []
				for (var i = 0; i < localIds.length; i++) {
					let localData = await self.doreadImage(localIds[i]);
					let imgBase64;
					if (localData.indexOf('data:image') == 0) {
						//苹果的直接赋值,默认生成'data:image/jpeg;base64,'的头部拼接
						imgBase64 = localData;
					} else {
						imgBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
					}
					let obj = new Object();
					obj.name = 'file';
					obj.uri = self.dataURLtoFile(imgBase64);
					fileArray.push(obj);
				}
				self.$showLoading()
				//调取后台接口传递参数 
				fileUploadPrivteReq(self.api, fileArray).then(res => {
						self.$hideLoading()
						
					})
					.catch(error => {
						
					});
			},
			doreadImage(item) {
				let that = this;
				that.$showLoading()
				return new Promise(resolve => {
					wx.getLocalImgData({
						localId: item,
						success: function(res) {
							that.$hideLoading()
							let localData = res.localData;
							resolve(res.localData);
						},
						fail: function(err) {
							that.$hideLoading()
						}
					});
				});
			},
			//base64转blob
			dataURLtoFile(base64) {
				var arr = base64.split(',');
				var mime = arr[0].match(/:(.*?);/)[1];
				var fileName = new Date().getTime() + '.' + mime.split('/')[1];

				var bstr = atob(arr[1]);
				var n = bstr.length;
				var u8arr = new Uint8Array(n);
				for (var i = 0; i < n; i++) {
					u8arr[i] = bstr.charCodeAt(i);
				}
				var url = URL || webkitURL;
				var blob = new Blob([u8arr], {
					type: mime
				})
				blob.name = fileName //这个filename我这边设置后台没有接收到 需要后台修改下接收方式
				return url.createObjectURL(blob);
			},

在pc端无法测试 只能在手机上测试(大家有什么更好的办法可以分享分享)

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
UniApp 是一套基于 Vue.js 的跨平台开发框架,它可以让你用一套代码同时构建 Web、H5、iOS、Android 等多端应用。对于微信登录功能,在 UniApp 中,你可以使用微信开放平台提供的 SDK 来集成。 微信登录的过程通常包含以下步骤: 1. 注册和配置:首先,你需要在微信公众平台上注册一个小程序或公众号,然后在开发者中心创建 AppID,并在 UniApp 项目的 config.json 文件中配置微信登录的相关信息,如 AppID 和 AppSecret。 ```json { "uniCloud": { "login": { "social": { "wxLogin": { "appId": "<your_app_id>", "appSecret": "<your_app_secret>" } } } } } ``` 2. 引入 SDK:在需要使用微信登录的地方引入 UniCloud 的登录模块。 3. 实现登录功能:在需要登录的地方调用微信登录接口,如 `uni.login()` 方法,传入类型为 `social.wxLogin`。 ```javascript uni.login({ provider: 'wxLogin', // 使用微信登录 success: function (res) { uni cloud.request({ url: '<your-server-url>', // 后端处理登录请求的 URL data: res.detail, method: 'POST', success: function (data) { // 登录成功后处理数据,如存储用户信息 }, fail: function (err) { console.error('登录失败:', err); } }); }, fail: function (err) { console.error('登录失败:', err); } }) ``` 4. 后端处理:接收到微信登录的回调后,你的后端服务器会验证授权码获取用户的 OpenID,进一步通过微信 API 获取用户的个人信息。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值