小程序从底部弹出选择框可以使用***wx.showActionSheet()***操作菜单,具体配置可以看微信官方文档
如果用户选择了从相册中选择,通过wx.chooseImage()选择图片进行上传wx.uploadFile()
如果用户点击了拍照功能,实现效果以下:
可以看出顶部导航被取消掉,整个页面被铺满,那么取消顶部导航的方式:
“navigationStyle”:“custom”
//custom 自定义导航栏,只保留右上角胶囊按钮
小程序的camera组件是需要授权的,
在拍照之前,页面初始化时,就需要判断用户是否授权了摄像头的权限,如果用户授权了那么用户才能在这个页面进行操作,否则,页面会返回到之前的页面。
给用户限制最多能拍9张图片
所以用户授权成功后,当用户点击拍照按钮,,当用户所上传的照片数量小于9的情况下,才能创建 camera 上下文 CameraContext 对象。然后利用这个对象的takePhoto去拍摄照片,拍摄成功之后,将拍摄成功的图片上传给后端,然后后端返回服务器上的图片
这就是整个流程
<camera wx:if="{{isAuth}}" style="width:100%;height:100%" device-position="{{devicePosition}}" flash="off" binderror="error">
<!-- 镜头切换 -->
<cover-view class="jintou_view">
<cover-image class="jingtou" src="../../images/qiehuan.png" bindtap="changePosition"></cover-image>
</cover-view>
<!-- 拍照按钮 -->
<cover-view class="camerabut_view">
<cover-image class="cancelphoto" src="../../images/down.png" bindtap="return"></cover-image>
<cover-image class="skipphoto" src="../../images/photo.png" bindtap="takePhoto"></cover-image>
</cover-view>
</camera>
takePhoto() {
let pages = getCurrentPages()//当前页的数据
let prePage = pages[pages.length - 2]//上一页的数据
if (prePage.data.listdetail.length < 9) {
const _this = this
const ctx = wx.createCameraContext()
ctx.takePhoto({//拍照
quality: 'high',
success: (res) => {
_this.uploadImg(res)
}
})
}
},