uniapp 微信小程序,保存图片到相册权限 拒绝后,无法再次调起授权

1、注意点
  • 背景:由于uni.authorize()方法,如果用户之前拒绝了授权,此接口会直接进入失败回调,需要搭配uni.getSettinguni.openSetting使用
  • 实现:通过 uni.getSetting() 获取用户授权信息,判断如同意授权/已授权,下载图片;如未授权,使用 uni.openSetting() 调起权限设置
  • 踩坑:微信公众平台提交正式版审核时,记得勾选采集用户隐私并进行相应信息完善,否则影响正式版设置权限
    -在这里插入图片描述
2、实现代码
// 点击事件
const uploadPicture = () => {
    // 先检查是否已经获取了授权
    uni.getSetting({
        success: (res) => {
            if (!res.authSetting[`scope.writePhotosAlbum`]) {
                // 如果没有授权,则请求授权
                uni.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success: () => {
                        // 在授权成功后执行保存图片的操作
                        saveImage(state.poster);
                    },
                    fail: () => {
                        // 授权失败,提示用户去设置页授权
                        showAuthFailModal();
                    }
                });
            } else {
                // 已经授权,直接保存图片
                saveImage(state.poster);
            }
        }
    });
};

// 保存图片
const saveImage = (url: any) => {
  uni.downloadFile({
    url: url,
    success: (res) => {
      console.log(res);
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          });
        }
      });
    },
    fail: () => {
      uni.showToast({
        title: '下载失败',
        icon: 'none'
      });
    }
  });
};


// 设置授权
const showAuthFailModal = () => {
  uni.showModal({
    title: '授权失败',
    content: '请前往设置页手动授权该权限',
    showCancel: false,
    confirmText: '去设置',
    success: (res) => {
      if (res.confirm) {
        uni.openSetting({
          success: () => {
            // 设置页打开成功后的操作
            uni.hideLoading();
          }
        });
      }
    }
  });
};
### UniApp小程序中图片上传的权限设置 在UniApp小程序中,当涉及到图片上传功能时,通常需要请求用户的设备权限(如相册或相机访问权),以便成功完成图片的选择与上传过程。以下是关于如何处理图片上传中的权限问题以及实现的具体示例。 #### 请求权限的方法 通过 `uni.authorize` 方法可以提前向用户申请特定的权限。对于图片上传而言,主要涉及的是 **相册** 和 **相机** 的访问权限。如果用户之前已经绝过该权限,则需要引导用户前往系统的权限管理界面手动开启。 具体代码如下: ```javascript // 检查并请求权限 function checkAndRequestPermission() { return new Promise((resolve, reject) => { uni.getSetting({ success(res) { const authStatus = res.authSettings['scope.album'] || res.authSettings['scope.camera']; if (!authStatus) { // 如果未授权 uni.authorize({ scope: 'scope.album', // 或者 'scope.camera' success() { resolve(true); // 授权成功 }, fail() { uni.showModal({ // 用户绝后提示重新打开权限 title: '警告', content: '您已绝访问相册/相机权限,请手动开启后再试。', confirmText: '去设置', cancelText: '取消', success(modalRes) { if (modalRes.confirm) { uni.openSetting(); // 打开设置页让用户修改权限 } reject(false); } }); } }); } else { resolve(true); // 已经授权 } } }); }); } ``` 上述代码实现了对相册 (`scope.album`) 或相机 (`scope.camera`) 访问权限的检查和请求流程[^4]。 #### 实现图片上传功能 一旦获得必要的权限之后,就可以利用 `uni.chooseImage` API 进行图片选择,并将其上传至服务器或其他云端服务。下面是一个完整的例子: ```javascript export default { data() { return { cover: '' // 存储封面图路径 }; }, methods: { async uploadCover() { try { await this.checkPermissions(); // 调用 chooseImage 选取图片 const result = await new Promise((resolve, reject) => { uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], // 可选来源:相册、相机 success(res) { resolve(res.tempFilePaths[0]); // 获取临时文件路径 }, fail(err) { reject(err); } }); }); // 更新视图上的封面图 src 属性 this.cover = result; console.log('Selected image:', result); // 此处还可以继续调用接口将图片上传到远程服务器... } catch (error) { console.error('Error during image selection or permission request:', error); } }, // 权限检测辅助函数 async checkPermissions() { await checkAndRequestPermission(); } } }; ``` 此段代码展示了从权限验证到图片选择的整体逻辑链路[^3]。 #### 动态绑定封面图片 前端页面上可以通过 Vue 数据绑定机制动态更新所选封面图的位置。例如: ```html <template> <view class="container"> <!-- 显示当前封面 --> <image :src="cover ? cover : '/static/default-cover.png'" mode="aspectFill"></image> <!-- 添加按钮触发上传动作 --> <button @click="uploadCover">更换封面</button> </view> </template> ``` 这里使用了三元运算符来决定是否显示默认占位图还是用户选定的实际图片--- ### 注意事项 - 不同平台可能表现出细微差异,比如某些 H5 浏览器无法完全遵循标准设定行为[^2]。 - 对于 Android 设备来说,部分场景下可以直接借助 Native.js 处理非媒体类型的文件;而对于 iOS 则往往依赖原生插件支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值