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

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

原来的方法

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

//点击下载
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返回的参数和上面有差异，注意对比。

修改后代码

//点击下载
const clickDownload = async () => {if(!gotoLogin()) return;let {_id,classid} = currentInfo.value;		// #ifdef H5let feedback = await showModal({content:"请长按保存壁纸"})if(feedback == 'confirm') actionCloudObj.writeDownload({picid:_id,classid})// #endif// #ifndef H5try {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。

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