该问题主要原因是因为 u-upload 的组件在点击上传组件就直接触发了权限获取
而华为的要求是 点击拍摄 提示获取相机权限并提示 点击 从相册选择 获取存储权限并提示
本文主要解决 uview 的u-upload导致的问题
解决思路为
修改u-upload组件
在 u-upload 组件添加以下代码
//https://ext.dcloud.net.cn/plugin?id=15739 检查是否拥有某个权限并根据权限弹出提示文本
<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
//自定义的 弹窗按钮 样式请自行修改 并做相应适配 这里是一个极简的方案
<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;
}
}
js部分
在 chooseFile函数首行加入
chooseFile() {
//拦截上传图片事件
if(this.accept=='image'){
//打开自定义弹窗
this.showPop = true
return
}
...
}
//点击按钮触发不同的权限检查
handleUpload(openType) {
//自定义的 图片上传方式
this.openType = openType
if (openType == 'camera') {
this.permissionID = 'CAMERA'
this.$nextTick(() => {
this.$refs.authpup.open()
})
} else if (openType == 'album') {
this.permissionID = 'WRITE_EXTERNAL_STORAGE'
this.$nextTick(() => {
this.$refs.authpup.open()
})
}
},
//权限检查完成的回调
changeAuth() {
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);
});
}
至此问题解决