该问题主要原因是因为 u-upload 的组件在点击上传组件就直接触发了权限获取
而华为的要求是 点击拍摄 提示获取相机权限并提示 点击 从相册选择 获取存储权限并提示
本文主要解决 uview 的u-upload导致的问题
解决思路为
修改u-upload组件
在 u-upload 组件添加以下代码
//自定义的 弹窗按钮 样式请自行修改 并做相应适配 这里是一个极简的方案 <view class="pop" v-show="showPop"> <view class="pop-box"> <view class="p-top"> //点击拍摄 手动检查拍摄权限 <view class="p-t-t" @click="handleUpload('camera')"> 拍摄 </view> //从相册选择 手动检查存储权限 <view @click="handleUpload('album')"> 从相册选择 </view> </view> <view class="p-bottom" @click="showPop=false"> 取消 </view> </view> </view>
.pop{ width: 100vw; height: 100vh; position: fixed; background-color: rgba(0, 0, 0, 0.3); top: 0; left: 0; z-index: 999; .pop-box{ width: 100%; position: absolute; bottom: 30rpx; } .p-top{ width: 100%; background-color: #FFFFFF; height: 160rpx; border-radius: 10rpx; view{ height: 80rpx; line-height: 80rpx; text-align: center; } .p-t-t{ border-bottom: 1rpx solid #000; } } .p-bottom{ width: 100%; margin-top: 30rpx; height: 80rpx; background-color: #fff; line-height: 80rpx; text-align: center; font-weight: bold; border-radius: 10rpx; } }
<u-popup :show="auth_show" zIndex="10075" mode="top" @close="auth_close" @open="auth_open"> <view class="p-30"> <view> <text class="font-40 font-bold">{{ts_title}}</text> <text class="font-36">{{ts_content}}</text> </view> <view class="mt30"> <text class="font-40 font-bold">{{ts_title1}}</text> <text class="font-36">{{ts_content1}}</text> </view> </view> </u-popup>
js部分
在 chooseFile函数首行加入
chooseFile() {
//拦截上传图片事件
//打开自定义弹窗
this.showPop = true
this.auth_show = true
return
}
加入方法
//点击按钮触发不同的权限检查 handleUpload(openType) { var _this=this; console.log(openType); //自定义的 图片上传方式 this.openType = openType if (openType == 'camera') { this.permissionID = 'CAMERA' this.$nextTick(() => { //this.$refs.authpup.open() _this.changeAuth(); }) } else if (openType == 'album') { this.permissionID = 'WRITE_EXTERNAL_STORAGE' this.$nextTick(() => { //this.$refs['authpup'].open(); //this.$refs.authpup.open() _this.changeAuth(); }) } }, //权限检查完成的回调 changeAuth() { //console.log("333"); const { maxCount, multiple, lists, disabled } = this; //触发u-upload的图片上传事件 chooseFile( Object.assign({ accept: this.accept, multiple: this.multiple, // 此处为 camera | album 直接打开相机 或者选择图片 capture: [this.openType], compressed: this.compressed, maxDuration: this.maxDuration, sizeType: this.sizeType, camera: this.camera, }, { maxCount: maxCount - lists.length, }) ) .then((res) => { this.onBeforeRead(multiple ? res : res[0]); }) .catch((error) => { this.$emit('error', error); }); },
data加入
showPop:false, auth_show:false, ts_title:'甜聘对存储空间/照片权限申请说明',//权限弹窗标题 ts_content:'便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、保存相册、合同附件、补贴预支理赔附件,人事附件、下载与客服沟通等场景中读取和写入相册和文件内容。',//权限弹窗内容 ts_title1:'甜聘对相机/摄像头权限申请说明',//权限弹窗标题 ts_content1:'便于您使用该功能拍照上传您的照片/视频及用于更换头像、意见反馈、保存相册、合同附件、贴预支理赔附件、下载与客服沟通等场景中使用',//权限弹窗内容
参考文档:https://blog.csdn.net/csdnxxxjjjqqq/article/details/135282521