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

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

  

原来的方法

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

2. //点击下载
3. const clickDownload = async () => {
4.         try {
5.                 uni.showLoading({
6.                         title: "下载中...",
7.                         mask: true
8.                 })
9.                 let res = await downPushData();
10.                 if(res.errCode != 0) throw res;                       
11.                 // #ifdef MP || APP                               
12.                 uni.getImageInfo({
13.                         src: crtWallInfo.value.picurl,
14.                         success: function(res) {                                       
15.                                 var path = res.path;
16.                                 uni.saveImageToPhotosAlbum({
17.                                         filePath: path,
18.                                         success(res) {
19.                                                 uni.hideLoading();
20.                                                 uni.showToast({
21.                                                         title: '保存成功,可去相册查看',
22.                                                         icon: "none",
23.                                                         duration:2000
24.                                                 })                                                       
25.                                         },
26.                                         fail(err) {
27.                                                 uni.hideLoading();
28.                                                 if(err.errMsg == 'saveImageToPhotosAlbum:fail cancel'){
29.                                                         uni.showToast({
30.                                                                 title: '保存失败，请重新点击下载',
31.                                                                 icon: "none"
32.                                                         })
33.                                                         return;
34.                                                 }                                                       
35.                                                 uni.showModal({
36.                                                         title: '提示',
37.                                                         content: '需要您授权保存相册',
38.                                                         showCancel: false,
39.                                                         success:res=>{
40.                                                                 if(res.confirm){
41.                                                                         uni.openSetting({
42.                                                                                 success(settingdata) {
43.                                                                                         if (settingdata.authSetting['scope.writePhotosAlbum']) {
44.                                                                                                 uni.showToast({
45.                                                                                                         title:'获取权限成功',
46.                                                                                                         icon:"none"
47.                                                                                                 })                                                                                                       
48.                                                                                         }else{
49.                                                                                                 uni.showToast({
50.                                                                                                         title:'获取权限失败',
51.                                                                                                         icon:"none"
52.                                                                                                 })                                                                                                       
53.                                                                                         }
54.                                                                                        
55.                                                                                 }
56.                                                                         })
57.                                                                 }
58.                                                         }
59.                                                 })
60.                                         },
61.                                         complete(err) {
62.                                                
63.                                         }
64.                                 })
65.                         }
66.                 })
67.                 // #endif
69.                 // #ifdef H5
70.                 //调用预览图片的方法               
71.                 uni.previewImage({
72.                         urls: [crtWallInfo.value.picurl],
73.                         current: 0, //点击图片传过来的下标
74.                         success: (res) => {
75.                                 uni.showToast({
76.                                         title: '请长按保存',
77.                                         icon: "none",
78.                                         duration: 2000
79.                                 })
80.                         }
81.                 })
82.                 // #endif
84.         } catch (err) {                       
85.                 console.log(err);
86.                 uni.hideLoading();
87.         }
88. }

复制代码

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

1. //点击下载
2. const clickDownload = async () => {
3.         if(!gotoLogin()) return;
4.         let {_id,classid} = currentInfo.value;               
5.        
6.         // #ifdef H5
7.         let feedback = await showModal({content:"请长按保存壁纸"})
8.         if(feedback == 'confirm') actionCloudObj.writeDownload({picid:_id,classid})
9.         // #endif
11.         // #ifndef H5
12.         try {
13.                 uni.showLoading({
14.                         title: "下载中...",
15.                         mask: true
16.                 })                       
17.                 uni.downloadFile({
18.                         url: currentInfo.value.picurl,
19.                         success: (res) => {
20.                                 console.log(res);
21.                                 uni.saveImageToPhotosAlbum({
22.                                         filePath: res.tempFilePath,
23.                                         success: (res) => {
24.                                                 uni.showToast({
25.                                                         title: "保存成功，请到相册查看",
26.                                                         icon: "none"
27.                                                 })
28.                                                 actionCloudObj.writeDownload({picid:_id,classid})
29.                                         },
30.                                         fail: err => {
31.                                                 if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
32.                                                         uni.showToast({
33.                                                                 title: '保存失败，请重新点击下载',
34.                                                                 icon: "none"
35.                                                         })
36.                                                         return;
37.                                                 }
38.                                                 uni.showModal({
39.                                                         title: "授权提示",
40.                                                         content: "需要授权保存相册",
41.                                                         success: res => {
42.                                                                 if (res.confirm) {
43.                                                                         uni.openSetting({
44.                                                                                 success: (setting) => {
45.                                                                                         console.log(
46.                                                                                                 setting);
47.                                                                                         if (setting
48.                                                                                                 .authSetting[
49.                                                                                                         'scope.writePhotosAlbum'
50.                                                                                                         ]) {
51.                                                                                                 uni.showToast({
52.                                                                                                         title: "获取授权成功",
53.                                                                                                         icon: "none"
54.                                                                                                 })
55.                                                                                         } else {
56.                                                                                                 uni.showToast({
57.                                                                                                         title: "获取权限失败",
58.                                                                                                         icon: "none"
59.                                                                                                 })
60.                                                                                         }
61.                                                                                 }
62.                                                                         })
63.                                                                 }
64.                                                         }
65.                                                 })
66.                                         },
67.                                         complete: () => {
68.                                                 uni.hideLoading();
69.                                         }
70.                                 })
72.                         },
73.                         fail(err) {
74.                                 console.log(err);
75.                         }
76.                 })
78.         } catch (err) {
79.                 console.log(err);
80.                 uni.hideLoading();
81.         }
82.         // #endif
83. }

复制代码

该方法同时也给uni.downloadFile增加了fail错误的实行方法，在之前代码中忘了加这个错误的返回值了，所以找了半天原因才知道uni.getImageInfo不支持webp格式。
注意：
uni.downloadFile()该API通报的参数是url，这个是你服务器返回的地址，success返回的暂时地址，放在tempFilePath属性内，使用uni.saveImageToPhotosAlbum()存入相册时，注意改一下filePath=res.tempFilePath。
假如文章帮助到你，请记得给点赞支持一下哦。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。