一：需要用到的API

1.uni.authorize(OBJECT)     -- 提前向用户发起授权请求。

uni.authorize({
  scope: 'scope.userInfo',
  success() {
    console.log('授权成功');
  }
});

注：如果用户之前拒绝了授权，此接口会直接进入失败回调。一般需要搭配uni.getSetting和uni.openSetting使用。

2.uni.getSetting (Object object)   --获取用户的当前设置消息

uni.getSetting({
  success(res) {
    if (res.authSetting['scope.userInfo']) {
      console.log('用户已授权');
    } else {
      console.log('用户未授权');
    }
  }
});

3.uni.openSetting(Object object)  --用户手动进行授权设置

uni.openSetting();

4.uni.uploadFile(OBJECT)   --将本地资源上传到开发者服务器

5.uni.downloadFile(OBJECT)  --下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

6. uni.saveImageToPhotosAlbum(OBJECT)   --保存图片到系统相册

二：思路

1.过程

1.判断用户是否授权保存图片到系统相册

    1：如果未授权（两种情况）：调授权再保存图片

       （1）用户第一次调用 （uni.authorize） 

       （2）用户之前拒绝授权 （uni.openSetting)

                        如果之前拒绝，过阵子想再次保存，需要判断是否第一次授权

  （注意：前面已经提过了authorize只弹窗一次，如果之前拒绝过了，接口直接进入失败回调，所以需要判断是否首次）

    2：如果已授权：直接保存图片

三：代码实现

 1.先配置：manifest.json

"mp-weixin": {
		"permission": {
			"scope.writePhotosAlbum": {
				"desc": "你的图片将保存到手机相册"
			  }
		},
	},

注： 微信小程序在2023年10月17日之后，使用API需要配置​​​​​​隐私协议

------获取具体信息请移步官方文档uni.chooseImage(OBJECT) | uni-app官网

2. 保存图片功能代码实现：（无判断授权情况）

  downSaveImage(imgurl) {
    uni.showModal({
      title: '保存图片',
      content: '是否保存当前图片？',
      success: (res) => {
        if (res.confirm) {
          uni.downloadFile({
            url: imgurl,//图片地址
            success: (res) => {
              if (res.statusCode === 200) {
                // console.log(res.tempFilePath,'res.tempFilePathres.tempFilePath');
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: function () {
                    uni.showToast({
                      title: '保存成功',
                      duration: 2000,
                    })
                  },
                  fail: function () {
                    uni.showToast({
                      title: '保存失败，请稍后重试',
                      icon: 'none',
                    })
                  },
                })
              }
            },
          })
        } else if (res.cancel) {
          uni.showToast({
          	title: "你取消了该操作",
          	icon:'none',
          	duration: 2000
          });
        }
      },
    })
  },

（2）用户授权情况部分代码

  downSaveImage(imgurl) {
    uni.getSetting({
      success(res) {
        if (res.authSetting['scope.writePhotosAlbum']) {
          // 已授权，直接保存图片
          //这里写保存图片代码.......
        } else if (res.authSetting['scope.writePhotosAlbum'] === false) {
          // 用户已拒绝授权，提示用户授权
          uni.showModal({
            title: '提示',
            content: '您未授权保存图片到相册，是否前往设置页面进行授权？',
            success: function (res) {
              if (res.confirm) {
                uni.openSetting({
                  success: function (res) {
                    if (res.authSetting['scope.writePhotosAlbum']) {
                      //这里写保存图片代码.......
                    }
                  },
                })
              } else if (res.cancel) {
                uni.showToast({
                  title: '您取消了授权',
                  icon: 'none',
                  duration: 2000,
                })
              }
            },
          })
        } else {
          // 用户第一次调用，调用授权接口
          uni.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              //这里写保存图片代码.......
            },
            fail() {
              uni.showToast({
                title: '授权失败，请稍后重试',
                icon: 'none',
                duration: 2000,
              })
            },
          })
        }
      },
    })
  },

（3）添加授权+保存图片功能的完整代码

downSaveImage(imgurl) {
  uni.getSetting({
    success(res) {
      if (res.authSetting['scope.writePhotosAlbum']) {
        // 已授权，直接保存图片
        uni.downloadFile({
          url: imgurl,
          success: (res) => {
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function () {
                  uni.showToast({
                    title: '保存成功',
                    duration: 2000,
                  })
                },
                fail: function () {
                  uni.showToast({
                    title: '保存失败，请稍后重试',
                    icon: 'none',
                  })
                },
              })
            }
          },
        })
      } else if (res.authSetting['scope.writePhotosAlbum'] === false) {
        // 用户已拒绝授权，提示用户授权
        uni.showModal({
          title: '提示',
          content: '您未授权保存图片到相册，是否前往设置页面进行授权？',
          success: function (res) {
            if (res.confirm) {
              uni.openSetting({
                success: function (res) {
                  if (res.authSetting['scope.writePhotosAlbum']) {
                    uni.downloadFile({
                      url: imgurl,
                      success: (res) => {
                        if (res.statusCode === 200) {
                          uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: function () {
                              uni.showToast({
                                title: '保存成功',
                                duration: 2000,
                              })
                            },
                            fail: function () {
                              uni.showToast({
                                title: '保存失败，请稍后重试',
                                icon: 'none',
                              })
                            },
                          })
                        }
                      },
                    })
                  }
                },
              })
            } else if (res.cancel) {
              uni.showToast({
                title: '您取消了授权',
                icon: 'none',
                duration: 2000,
              })
            }
          },
        })
      } else {
        // 用户第一次调用，调用授权接口
        uni.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            uni.downloadFile({
              url: imgurl,
              success: (res) => {
                if (res.statusCode === 200) {
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function () {
                      uni.showToast({
                        title: '保存成功',
                        duration: 2000,
                      })
                    },
                    fail: function () {
                      uni.showToast({
                        title: '保存失败，请稍后重试',
                        icon: 'none',
                      })
                    },
                  })
                }
              },
            })
          },
          fail() {
            uni.showToast({
              title: '授权失败，请稍后重试',
              icon: 'none',
              duration: 2000,
            })
          },
        })
      }
    },
  })
}

四：项目中注意的问题：

1.微信小程序模拟器可以保存图片，但是手机真机调试不行。

问题描述：项目中如果图片地址是后台返回的临时地址，在微信小程序模拟器返回的地址开头是：

http://tmp/.......jpg

但是真机上调试返回图片地址开头是：

wxfile://tmp/......jpg

原因：临时地址是没用的，需要使用uni.uploadFile上传到服务器上转换永久地址

代码：

   uni.uploadFile({
        url: 'https://app.wugongyuan.cn/api/common/uploadFile', // 上传的服务器地址
        filePath: res, // 临时文件路径
        name: 'file', // 上传文件的字段名
        success: function (res) {
          this.upLoadImgUrl = JSON.parse(res.data).data.fileUrl
          console.log(this.upLoadImgUrl, 'upImgUrl---------------')
          // 为什么一直先走下面的
          // setTimeout(()=>{
          console.log(this.upLoadImgUrl, 'this.upLoadImgUrl')

          // that.downSaveImage(this.upLoadImgUrl)
          that.$tools.downSaveImage(this.upLoadImgUrl)
          // },5000)
        },
        fail: function (error) {
          console.log(error)
          // 处理上传失败的情况
        },
      })

以上会引起作用域this指向问题 ，可以参考另一篇文章函数内引入外部函数的调用顺序问题及解决方案-CSDN博客

2.小程序开发者工具和真机调试上传图片都可以,体验版，开发，正式都不行

在小程序后台=>开发管理=>服务器域名下面设置下uploadFile合法域名就可以了

原因：在小程序开发过程中，特别是在微信小程序、QQ小程序或其他类似平台的小程序开发环境中，当你需要实现上传文件（例如上传图片、文档或其他类型文件到服务器）的功能时，这个服务器的域名必须事先在“服务器域名”列表中进行白名单配置。如果没有正确配置，小程序在试图上传文件至未经允许的域名时，会因为安全策略而遭到拦截，导致上传失败。

3.必须要先授权请求（authSetting）

如果直接（openSetting）让用户手动设置授权，打开的只是之前已经授权过的权限，看不到未请求的内容。

要用户先拒绝授权，再引导用户手动打开设置页面进行授权。这样用户在设置页面中就能看到所有的权限内容，包括未请求的权限，从而能够正确地进行授权操作。

ps:之前一直打开手动的，没有授权过，所以就没有想要的授权按钮，耗了好久还以为是什么大bug..........

# uni-app # 微信小程序 # 小程序
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊