因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端无法测试 只能在手机上测试(大家有什么更好的办法可以分享分享)

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐