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

2023-11-11

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uni-app h5公众号 上传多张图片问题 的相关文章

  • Linux中的一些指令及./详解

    在 Linux 中有许多常见的指令用于执行各种任务 以下是一些常见的 Linux 指令及其用法的总结 ls 列出目录中的文件和子目录 用法 ls 选项 目录 cd 改变当前工作目录 用法 cd 目录 pwd 显示当前工作目录的路径 用法 p
  • js逆向案例三

    目录 零 概述 一 请求参数 Cookie Referer校验 二 参数响应加密解密AES DES RSA 三 其它js混淆 1 案例7 百变ip eval 2 案例8 聚合图床 sojson v6 3 案例9 SH行政处罚 sojson
  • varest插件使用

  • 数据结构学习——顺序栈和链式栈的简单实现和解析(C语言版)

    数据结构 栈的简单解析和实现 一 概念 二 入栈 push 三 出栈 pop 四 顺序栈简单实现 1 进栈操作 2 出栈操作 一 概念 本篇所讲解的栈和队列属于逻辑结构上的划分 逻辑结构分为线性结构 非线性结构 线性结构 有且仅有一个开始节

随机推荐

  • GD32E230芯片无法识别

    GD32E230芯片无法识别 GD32E230板子回来后 开始接上jlink烧录 但是板子第一次能烧录然后第二次就不行的了 换了好几个板子都是 搞了好几个小时 整个人都快崩溃了 后面也是经过不断的尝试 终于搞好了 总结了一下 主要要注意的问
  • Qt的connect槽函数

    一 connect 函数的不同参数形式 以及其区别 优略 除2 未知 之外 总体分为三种形式 1 3信号和槽转为字符串形参的connect函数 4 5 6 7 8信号和槽转为可调用对象的connect函数 9转到槽函数 1 将信号连接到另一
  • 视觉算法工程师面试问题集锦,从基础到进阶,会介绍细节,持续更新中......

    引言 简历上写项目的流程 项目背景是什么 应用场景在什么地方 目的是什么 创造了什么价值 你做了什么事情 遇到困难时 又是怎么解决的 面试需要准备的内容 一 项目描述与项目细节提问 主要描述项目背景 项目实现的功能与方法流程等 面试官会针对
  • 基于STM32的OLED屏显示AHT20采集的温湿度数据

    文章目录 一 实现温湿度数据采集并通过串口显示 二 实现将温湿度采集数据显示到OLED屏 1 代码下载 2 部分代码的编写 3 编译并烧录 4 运行结果 三 小结 四 参考链接 本实验使用的工具 STM32野火mini开发板 AHT20温湿
  • mysql没有写入权限_解决Errcode: 13——mysql写文件权限问题

    mysql没有写入权限 解决Errcode 13 mysql写文件权限问题 一 问题 二 权限错误 Errcode 13 解决方法 三 原理 一 问题 在数据库中select into outfile home mysql data sql
  • Three.js入门之做一个简单的3D场景内添加标点的功能

    什么是Three js 百度百科上是这么说的 Three js是JavaScript编写的WebGL第三方库 提供了非常多的3D显示功能 运行在浏览器中的 3D 引擎 你可以用它创建各种三维场景 包括了摄影机 光影 材质等各种对象 你可以在
  • 数据结构第一次上机 第一章

    数据结构第一次上机 第一章 实验题2 常见算法时间函数的增长趋势分析 目的 理解常见算法时间函数的增长情况 内容 编写一个程序exp1 2 cpp 对于1 n的每个整数n 输出log2 n n Alt 41420出根号 n nlog2 n
  • 20050621:松一口气

    今天把业务日志的数据 恢复 上去了 不管怎么样 X姐放了一罐椰奶在我桌子上 我猜大概不会收到投诉了 因为这事情她也有责任 从某种意义上说是我帮她 摆平 了 但是下午X姐的本性又露出来了 不停的冒一些点子出来 客户总是这样 喜欢出些点子 并暗
  • ARTS挑战打卡第十周

    Algorithm 一周至少一道算法题 Review 阅读并点评至少一篇英文技术文章 Tip 学习至少一个技术技巧 总结和归纳在日常工作中所遇到的知识点 Share 分享一篇有观点和思考的技术文章 01 Algorthm https lee
  • 什么是面向对象

    面向对象 定义 面向对象 Object Oriented 是软件开发方法 一种编程范式 对象来自某一个类 同时又给类赋值而实例化 面向对象编程中执行一个功能的代码叫方法 method 举例 作为团队负责人 分管好各个部门的负责人就行 不需要
  • 【TensorFlow】激活函数(Activation Functions)原理解析(十二)

    神经网络结构的输出为所有输入的加权和 这导致整个神经网络是一个线性模型 如果将每一个神经元的输出通过一个非线性函数 那么整个神经网络的模型也就不再是线性的了 使得神经网络可以更好地解决较为复杂的问题 这个非线性函数也就是激活函数 神经网络中
  • elementUI一条el-form-item控制两个必填项

    实现效果 申请日期是日期跟时段拼接的
  • Qt 文件操作

    文件操作是应用程序必不可少的部分 Qt 作为一个通用开发库 提供了跨平台的文件操作能力 Qt5 新增加了一个QFileDevice类 途中所涉及的类及其用途简要说明如下 QFlie 访问本地文件或者嵌入资源 QTemporaryFile 创
  • 动态规划之在二叉树中使用DP

    二叉树染色 题目描述 文章目录 二叉树染色 题目描述 详细思路 个人走的弯路 可略 正确思路 代码实现 传送门 小扣有一个根结点为 root 的二叉树模型 初始所有结点均为白色 可以用蓝色染料给模型结点染色 模型的每个结点有一个 val 价
  • Python爬虫(一):学习路线

    Python爬虫一 学习路线 前言 打铁还需自身硬 前置要求 掌握Python基础知识 知识点 案例 为驱动 第一阶段 爬虫核心 爬虫的前导知识 爬虫网络请求模块 uellib requests 数据解析 正则 xpath bas4 第二阶
  • CentOS6.5菜鸟之旅:文件权限详解

    一 前言 Linux下所有资源 设备均被视作文件来操作 而文件权限则是决定用户可各文件操作的范围 无论是平时使用Linux 还是写程序均涉及这方面 以下为个人学习的整理 供以后查阅 二 三种权限 1 普通权限 权限 文件 目录 r 读权限
  • 深度学习下的医学图像分析

    转 https www leiphone com news 201706 xwSoWmhNgkn34iGS html https www leiphone com news 201706 UvZxrlbedfT7Meid html http
  • 编译器与平台相关性

    每种处理器都可能会有自己的汇编语言编译器 而对于同一款处理器来说 针对不同的平台 比如 Windows 和 Linux 也会有不同版本的汇编语言编译器 理论上 不管用的是什么操作系统 Windows 也好 DOS 也好 Linux 也好 只
  • Ansible 介绍安装及其使用(基础)

    Ansible 介绍安装及其使用 基础 1 介绍 Ansible 是一个 IT 自动化工具 它能配置系统 部署软件 编排更复杂的 IT 任务 如连续部署或零停机时间滚动更新 Ansible 用 Python 编写 尽管市面上已经有很多可供选
  • uni-app h5公众号 上传多张图片问题

    因uni app的api不支持安卓手机上传多张图片所以要单独引入用到jssdk uni app的底层不是jssdk 第一步 引入jssdk npm i weixin js sdk 文档 https developers weixin qq