咸虾米壁纸微信小程序下载图片到相册saveImageToPhotosAlbum功能修改

当我将咸虾米壁纸这个项目进行重构的时候,想要将图片资源变得小一点,所以在上传图片的时候均采用了webp格式的,这样就导致再预览页面下载图片的时候出错了,之前使用的是uni.getImageInfo()这个API,该API不支持webp图片格式获取临时地址,所以这篇文章将getImageInfo方法改成uni.downloadFile()方法便可解决。

原来的方法

原文链接:https://blog.csdn.net/qq_18798149/article/details/135871140

js 复制代码
//点击下载
const clickDownload = async () => {
	try {
		uni.showLoading({
			title: "下载中...",
			mask: true
		})
		let res = await downPushData();
		if(res.errCode != 0) throw res;			
		// #ifdef MP || APP				
		uni.getImageInfo({
			src: crtWallInfo.value.picurl,
			success: function(res) {					
				var path = res.path;
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success(res) {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功,可去相册查看',
							icon: "none",
							duration:2000
						})							
					},
					fail(err) {
						uni.hideLoading();
						if(err.errMsg == 'saveImageToPhotosAlbum:fail cancel'){
							uni.showToast({
								title: '保存失败,请重新点击下载',
								icon: "none"
							})
							return;
						}							
						uni.showModal({
							title: '提示',
							content: '需要您授权保存相册',
							showCancel: false,
							success:res=>{
								if(res.confirm){
									uni.openSetting({
										success(settingdata) {
											if (settingdata.authSetting['scope.writePhotosAlbum']) {
												uni.showToast({
													title:'获取权限成功',
													icon:"none"
												})													
											}else{
												uni.showToast({
													title:'获取权限失败',
													icon:"none"
												})													
											}
											
										}
									})
								}
							}
						})
					},
					complete(err) {
						
					}
				})
			}
		})
		// #endif

		// #ifdef H5
		//调用预览图片的方法		
		uni.previewImage({
			urls: [crtWallInfo.value.picurl],
			current: 0, //点击图片传过来的下标
			success: (res) => {
				uni.showToast({
					title: '请长按保存',
					icon: "none",
					duration: 2000
				})
			}
		})
		// #endif

	} catch (err) {			
		console.log(err);
		uni.hideLoading();
	}
}

上面这个方法,通过uni.getImageInfo()无法获取webp格式,所以进行改造,使用uni.downloadFile()这个API,不过这个API返回的参数和上面有差异,注意对比。

修改后代码

js 复制代码
//点击下载
const clickDownload = async () => {
	if(!gotoLogin()) return;
	let {_id,classid} = currentInfo.value;		
	
	// #ifdef H5
	let feedback = await showModal({content:"请长按保存壁纸"})
	if(feedback == 'confirm') actionCloudObj.writeDownload({picid:_id,classid})
	// #endif

	// #ifndef H5
	try {
		uni.showLoading({
			title: "下载中...",
			mask: true
		})			
		uni.downloadFile({
			url: currentInfo.value.picurl,
			success: (res) => {
				console.log(res);
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: (res) => {
						uni.showToast({
							title: "保存成功,请到相册查看",
							icon: "none"
						})
						actionCloudObj.writeDownload({picid:_id,classid})
					},
					fail: err => {
						if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
							uni.showToast({
								title: '保存失败,请重新点击下载',
								icon: "none"
							})
							return;
						}
						uni.showModal({
							title: "授权提示",
							content: "需要授权保存相册",
							success: res => {
								if (res.confirm) {
									uni.openSetting({
										success: (setting) => {
											console.log(
												setting);
											if (setting
												.authSetting[
													'scope.writePhotosAlbum'
													]) {
												uni.showToast({
													title: "获取授权成功",
													icon: "none"
												})
											} else {
												uni.showToast({
													title: "获取权限失败",
													icon: "none"
												})
											}
										}
									})
								}
							}
						})
					},
					complete: () => {
						uni.hideLoading();
					}
				})

			},
			fail(err) {
				console.log(err);
			}
		})

	} catch (err) {
		console.log(err);
		uni.hideLoading();
	}
	// #endif
}

该方法同时也给uni.downloadFile增加了fail错误的执行方法,在之前代码中忘了加这个错误的返回值了,所以找了半天原因才知道uni.getImageInfo不支持webp格式。

注意:

uni.downloadFile()该API传递的参数是url,这个是你服务器返回的地址,success返回的临时地址,放在tempFilePath属性内,使用uni.saveImageToPhotosAlbum()存入相册时,注意改一下filePath=res.tempFilePath。

如果文章帮助到你,请记得给点赞支持一下哦。

相关推荐
木易 士心1 小时前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
软件技术员2 小时前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
future_studio2 小时前
聊聊 Unity(小白专享、C# 小程序 之 播放器)
unity·小程序·c#
Q_Q5110082853 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
小Tomkk3 小时前
Rokid 开发空间小程序 实战
3d·小程序·rokid·jsar
说私域4 小时前
基于多模态AI技术的传统行业智能化升级路径研究——以开源AI大模型、AI智能名片与S2B2C商城小程序为例
人工智能·小程序·开源
2501_916007475 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者87 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
努力就够了7 小时前
微信小程序:日常零售供应系统
微信小程序·erp·接单·零售系统
说私域7 小时前
基于开源AI大模型、AI智能名片与S2B2C商城小程序的购物中心精准零售数据架构研究
人工智能·小程序·开源