Shulou(Shulou.com)06/03 Report--

This article mainly explains "vue how to achieve pc photo upload function", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "vue how to achieve pc photo upload function" bar!

The details are as follows

Var video = document.getElementById ('video'); var track;var Camera= document.getElementById (' camera'); window.addEventListener ("DOMContentLoaded", function () {navigator.getUserMedia = navigator.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia; if (navigator.getUserMedia) {navigator.getUserMedia ({video:true}, function (stream) {track = stream.getTracks () [0]) / / turn off the camera video.src = window.URL.createObjectURL (stream); video.onloadedmetadata = function (e) {video.play ();};}, function (err) {alert (err.name);});}}); Camera.onclick = function () {var canvas = document.getElementById ('canvas') Var context2D = canvas.getContext ("2d"); context2D.fillStyle = "# ffffff"; context2D.fillRect (0,0,320,320); context2D.drawImage (video, 0,0,320,320); var image_code = canvas.toDataURL ("image/png"); / / base64 console.log (image_code) if (null! = track) {track.stop (); / / disable camera}};

The previous code will call the camera when the web page is opened.

What is passed to the background is a Base64 code.

Here is the code I passed to the background with vue

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

Here is my php background receiving code

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); / / get Base64 code $img = str_replace ('','+', $img) $data = base64_decode ($img); $name = time (). ".png"; $savepath = ". / upload/". The location where the name;// saved the picture file_put_contents ($savepath,$data); / / write the content to the file $this- > ajaxReturn ('status'= >' 0mom data storage = > $savepath);}

If you want to click the trigger to open the camera, you can take out the code in camera and put it in a method.

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]; / / turn off camera video.src = window.URL.createObjectURL (stream) through this Video.onloadedmetadata = function (e) {video.play ();};}, function (err) {alert (err.name);}) }} Thank you for your reading. The above is the content of "how vue implements the photo upload function on pc". After the study of this article, I believe you have a deeper understanding of how vue implements the photo upload function on pc, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.