当我将咸虾米壁纸这个项目进行重构的时候，想要将图片资源变得小一点，所以在上传图片的时候均采用了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 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。
如果文章帮助到你，请记得给点赞支持一下哦。