小程序调用摄像头拍照和上传图片

微信小程序开发文档
首先，需要用户授权摄像头权限，这一步是必须的

具体步骤：

1、获取用户当前授权状态，看是否已经授权，如果已经授权直接显示摄像头
2、如果用户还没有授权，则调起授权弹框，用户允许授权则显示摄像头
3、如果用户不允许，则提示用户去设置页面打开摄像头权限

用户授权之后，就可以进行拍摄了，微信的camera组件无法显示为圆形，我这里是用一张图片遮盖了

上代码：

wxml：

wsss:

js:

微信小程序实现图片上传

首先是静态布局和样式部分

.wxml：

.wxss:

以上这些基本代码就可以完成图片上传，显示，删除等样式布局

下面是js的部分，我已详细备注～～～

先来看下完整的代码

代码里对代码的备注已经很明确了，大家仔细扒一下，根据的自己的项目进行相应的调整，基本上都是没问题的，不要直接直接粘贴不复置，我是直接在我的项目中直接拿过来的代码，直接粘贴复制肯定是不行的！！！

image.png

通常在真机上点击选中图片后wx.chooseImage方法中返回的文件路径是wxfile:开头的路径，这样的路径想直接转成base64，上面的方式是可以实现的，我也是查了很多资料才找到的解决办法。

再一个需要注意的是image src属性想显示base64格式的图片要进行字符串拼接才可以正常显示如下图

image.png

参考原文链接1
参考原文链接2