vue如何实现pc端拍照上传功能

这篇文章主要讲解了"vue如何实现pc端拍照上传功能"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"vue如何实现pc端拍照上传功能"吧！

具体内容如下

  　　 　　　　　　 　　   
              拍照         
 　　 

上段代码会在打开网页的时候就会调用摄像头

传给后台的是个base64码

下面是我用vue传给后台的代码

var param = { file:image_code2 } var a = JSON.stringify(param);  uploadimg(a).then((res) => {     console.log(res);           });

下面是我的php后台接收代码

public function uploadImg($name="img",$path='img'){        $_POST = json_decode(file_get_contents('php://input'),true);        $param = $_POST;        $image_code = $param['file'];        $img = str_replace(_'data:image/png;base64,', '', $image_code);//获取base64码        $img = str_replace(' ', '+', $img);        $data = base64_decode($img);        $name = time().".png";        $savepath = "./upload/".$name;//将图片存到的位置        file_put_contents($savepath,$data);//将内容写入文件        $this->ajaxReturn(array('status'=>'0','data'=>$savepath));    }

如果想点击触发 打开摄像头可以将camera中代码取出放在一个方法中即可

var Camera= document.getElementById('camera'); window.addEventListener("DOMContentLoaded", function(){ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;    });    function demo(){ if (navigator.getUserMedia) {    navigator.getUserMedia({video:true},     function(stream) {      track = stream.getTracks()[0];  // 通过这个关闭摄像头      video.src = window.URL.createObjectURL(stream);      video.onloadedmetadata = function(e) {           video.play();         };     },     function(err) {        alert(err.name);     }    );  }  }

感谢各位的阅读，以上就是"vue如何实现pc端拍照上传功能"的内容了，经过本文的学习后，相信大家对vue如何实现pc端拍照上传功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！