咸虾米壁纸微信小程序下载图片到相册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。

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