uniapp下载和上传照片

news2024/9/23 11:18:34

利用uniapp开发的时候,需要下载和上传照片,在H5和微信小程序中的写法不一样。

H5环境下

浏览器中下载就是模拟超链接下载。也不需要获取什么权限,比较简单。

// #ifdef H5
this.isLoading = true;
let oA = document.createElement("a");
// 设置下载的文件名,不设置就是默认的
oA.download = ''; 
// 图片下载链接
oA.href = imgUrl;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
this.isLoading = false;
// #endif

微信小程序

小程序下载需要先获取相册权限。

downloadPic() {
	// #ifdef MP-WEIXIN
	this.checkAppRight();
	// #endif 
	// #ifdef H5
	...
	// #endif
},
// 先校验权限
checkAppRight() {
    // 检查是否之前就调用过uni.authorize
	if (!this.isAuthorize) {
		uni.authorize({
			// 请求相册写入权限
			scope: 'scope.writePhotosAlbum',
			success: () => {
				this.downloadImgOnPhone();
			}
		});
		return;
	}
	// 检查当前小程序的设置信息,这个设置可以看下面的图片说明是什么设置
	uni.getSetting({
	    // 这里可能会触发报错:this 为 undefined,建议使用箭头函数,不要使用普通函数,否则在小程序中调用this会报错。
		success: (res) => {
			// 如果没有相册写入权限,需要先引导用户打开设置权限
			if (!res.authSetting['scope.writePhotosAlbum']) {
				/* 打开设置的方法 */
				uni.showModal({
					title: '提示',
					content: '请先在设置页面打开“保存相册”使用权限',
					confirmText: '去设置',
					cancelText: '取消',
					success: data => {
						if (data.confirm) {
							uni.openSetting()
						}
					}
				});
			} else {
				this.downloadImgOnPhone();
			}
		}
	});
},
// 开始下载图片
downloadImgOnPhone() {
	this.isLoading = true;
	// 下载文件,必须先调用downloadFile,不然会报错。
	uni.downloadFile({
		url: imgUrl, // 图片链接
		success: (res) => {
			if (res.statusCode === 200) {
			    // 保存下载的文件到相册
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: () => {
						this.isLoading = false;
						uni.showToast({
							title: '下载成功',
							icon: "none",
							duration: 5000
						})
					},
					fail: (err) => {
						this.isLoading = false;
						uni.showToast({
							title: '下载失败',
							icon: "none",
							duration: 5000
						})
					},
				})
			}
		},
		fail: (err) => {
			this.isLoading = false;
			uni.showToast({
				title: JSON.stringify(err),
				icon: "none",
				duration: 5000
			})
		}
	});
}

查看微信小程序的设置信息,点击设置进去即可查看,uni.openSetting接口就是会打开这个设置页面:
在这里插入图片描述
uni.authorize 申请授权,会触发底部弹窗:
在这里插入图片描述
如果小程序被用户授权成功,在openSetting页面会显示“添加到相册”,如果用户手动关掉该选项,那么下次就不应该调用uni.authorize,而是调用uni.openSettin,引导用户开启开关。
在这里插入图片描述
更多uniapp的开发文章可以关注博主,后续还会继续更新。
如果对于uview组件的开发效果感兴趣的童鞋,可以访问链接查看:https://ext.dcloud.net.cn/plugin?id=12603

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/735516.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[软件工具]姓氏谐音梗随机生成工具使用教程

首先我们打开软件 输入姓氏和生成数即可开始生成,注意生成数可以随便填,软件会自动按最大数生成,比如你设置生成数位10000则可能只会生成500个,因为软件内置只有这么多。单次生成不重复,生成效果可以访问视频教程&…

MySQL多表查询练习

多表连接查询 use mydb3; -- 创建部门表 create table if not exists dept3( deptno varchar(20) primary key , -- 部门号 name varchar(20) -- 部门名字 );-- 创建员工表 create table if not exists emp3( eid varchar(20) primary key , -- 员工编号 ename varchar(20), --…

数仓建设中最常用模型--Kimball维度建模详解

数仓建模首推书籍《数据仓库工具箱:维度建模权威指南》,本篇文章参考此书而作。文章首发公众号:五分钟学大数据,公众号后台发送“维度建模”即可获取此书籍第三版电子书 先来介绍下此书,此书是基于作者 60 多年的实际业…

leetcode:174. 地下城游戏:动态规划法

174. 地下城游戏 - 力扣(Leetcode) 恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在 左上角 的房间里,他必须穿过地下城并通过对抗恶魔来拯救公主。 骑士的初…

史上最全Windows下VScode配置大全

文章目录 1、安装Vscode下载安装配置C和中文 2、安装MinGW-w643、检查是否配置成功 1、安装Vscode 下载安装 首先先下载VSCODE: 链接: VScode下载 下载好安装包以后,直接在自己指定目录安装: 配置C和中文 打开VScode的左下角位置&#…

Proteus 8.13安装教程

不涉及版权问题。 1、双击“Proteus 8.13 SP0 Pro.exe”开始安装 2、按照安装向导进行操作,等待安装成功 1)选择“Browse"自定义安装路径,再点击:Next 2)点击:Next 3)等待一段时间&#xf…

C#学习之路-判断

判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的)。 下面是大多数编程语言中典型的判断结构的一般形式: 判断语句 语句描述if …

闪烁灯光门铃电路设计

闪烁灯光门铃不仅具有门铃的声音还可以通过家里的门灯发出闪烁的灯光,适合用于室内嘈杂环境时使用,也适用于有聋哑人的家庭。 一、电路工作原理 电路原理如图 30 所示。 由基本的门铃电路和灯光、声音延迟控制电路两部分组成。按下门铃按钮 SB&#x…

C语言每日一题之旋转数求最小值

hello,今天我们分享一道题目,是牛客网上的一道题 求旋转数组中的最小值https://www.nowcoder.com/practice/9f3231a991af4f55b95579b44b7a01ba?tpId13&tqId23269&ru/ta/coding-interviews&qru/ta/coding-interviews/question-ranking 那我…

创新指南 | 用这8种商业分析模型,让你得到靠谱的业务创新灵感

当我们想要创新时,往往需要有实际的依据来支撑我们的想法。商业咨询顾问通常被认为是聪明的人,他们拥有模型化的分析思维,这种思维方式可以帮助他们更好地理解市场、竞争对手和客户需求。商业分析思维是一种系统性的思考方式,它可…

P1 第一章 电路模型与电路定律

1、什么是电路模型? 实际电路与电路模型间的关系?建立在相同的电路理论基础之上。 实际电路定义:由电工设备和电气器件,按照预期目的连接构成的,电流的通路。 实际电路的功能:能量方面,可以传输…

【计算机网络】第三章 数据链路层(MAC地址 IP地址 ARP协议)

文章目录 3.7.1 MAC地址3.7.2 IP地址3.7.3 ARP协议 3.7.1 MAC地址 MAC地址(Media Access Control address)是网络设备(如网卡、无线网卡)在数据链路层上的唯一标识符。以下是有关MAC地址的一些要点: 描述&#xff1a…

超详细,Jmeter性能测试-模拟100个用户并发(实战)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 100个真实的用户 …

【uniapp调用微信支付】uniapp开发小程序-调用微信支付

哈喽大家好~我是马小跳。一名进阶中的程序媛。 在这里记录下自己成长的每一次进步,希望遇到志同道合的猿友 一起努力,一起把技术up up up!!! 使用uniapp开发小程序时,调用微信支付的步骤如下: …

Web项目中耗时操作,用异步请求,减少请求等待时间,使用Redis保证操作幂等性

最近项目中碰到了一个接口需要比较耗时的操作,但是我们公司前后端交互的网关设置了超时时间。因此我需要设置出一个方案保证给用户比较快的响应,又保证任务执行了。因此我采用了,下面的操作方式。 客户端发送请求后,我会先去Redis…

MySQL数据库,创建表及其插入数据和查询数据

首先,由上图创建表 mysql> create table worker(-> dept_id int(11) not null,-> emp_id int (11) not null,-> work_time date not null,-> salary float(8,2) not null,-> poli_face varchar(10) not null default 群众,-> name varchar(20…

中文模型的奋起直追:MOSS、baichuan-7B和ChatGLM2-6B的原理、部署与微调

第一部分 复旦MOSS MOSS是复旦大学邱锡鹏团队推出的一个支持中英双语和多种插件的开源对话语言模型,moss-moon系列模型具有160亿参数,在FP16精度下可在单张A100/A800或两张3090显卡运行,在INT4/8精度下可在单张3090显卡运行 其基座语言模型…

【React笔记】react循环列表的写法

react循环的写法 简单循环输出人名简单循环输出json格式数组 简单循环输出人名 循环输出people数组中的四个人名 import ReactDOM from react-dom/client;const people [宋江,卢俊义,吴用,公孙胜 ]; const root ReactDOM.createRoot(document.getElementById(root)); root.…

深度学习入门知识总结

0、前言:学习了深度学习入门的鱼书,很多基础概念有了大概了解,及时总结,方便日后查找 1、神经网络(深度学习)的起源算法——感知机: 定义:感知机接收多个输入信号,输出一…

【C++修炼之路】33.特殊类设计

每一个不曾起舞的日子都是对生命的辜负 特殊类设计 一.设计一个类,不能被拷贝二.设计一个类,只能在堆上创建对象1. 普通类的创建对象2.只能在堆上创建对象的类 三.设计一个类,只能在栈上创建对象四.设计一个类,不能被继承五.单例模…