世界杯积分榜_世界杯几年一届 - fjmzsy.com

今天项目上遇到一个功能，人脸录入，要求用户可以自己调用摄像头拍照上传图片，还可以上传本地图片，这个功能并没有那么复杂，今天就封装一下这个功能，首先咱们看一下效果。

下面是封装好的效果，因为封装的时候做了页面销毁关闭摄像头，所以加了一个打开摄像头的功能，我们可以自己拍照，也有本地上传按钮 下面是拍照效果，左边部分是你点击拍照上传服务器返回来的地址，然后显示效果，右边就是咱们上面说的封装好的组件 下面看一下组件实现的代码

主要功能逻辑就是调用是摄像头权限，把实时画面显示到video里面，点击拍照的时候绘制vanvas，然后把canvas转base64图片，base64图片转文件进行上传，上传图片就不多介绍了，就是Element文件上传，配置action，headers 就行。下面直接上代码吧。

封装好以后就是调用了

上面代码注释已经都写了，相信大家都能看懂

如果本章对你有帮助，就三连吧