vue上传照片,vue怎么去做上传图片功能

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现个人计算机端拍照上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实现个人计算机端拍照上传功能的具体代码，供大家参考，具体内容如下

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=UTF8

　　/头

　　身体

　　div id=contentHolder

　　视频id=视频宽度=320 高度=320 自动播放/视频

　　按钮id=照相机拍照/按钮

　　画布id=画布宽度=320 高度=320

　　/画布

　　/div

　　脚本类型=文本/javascript

　　var视频=文档。getelementbyid( video )；

　　定义变量轨迹；

　　var相机=文档。getelementbyid( Camera )；

　　窗户。addevent侦听器( DOMContentLoaded ，function(){

　　领航员。getuser media=navigator。getuser media 导航器。WebKit getuser media navigator。mozgetuser媒体；

　　if (navigator.getUserMedia) {

　　领航员。获取用户媒体({ video:true }，

　　函数（流){

　　轨道=流。获取曲目()[0]；//通过这个关闭摄像头

　　video.src=window .URL.createObjectURL(流);

　　视频。onloadedmetadata=函数(e){

　　视频。play()；

　　};

　　函数（错误){

　　警报(错误。姓名)；

　　}

　　);

　　}

　　});

　　Camera.onclick=function(){

　　var canvas=文档。getelementbyid(“canvas”)；

　　变量上下文2d=画布。获取上下文(“2d”)；

　　上下文2d。填充样式= # ffffff

　　context2D.fillRect(0，0，320，320)；

　　context2D.drawImage(视频，0,0,320,320);

　　var image _ code=画布。toda taurl( image/png )；//要传给后台的base64

　　console.log(图像代码)

　　if (null！=轨道){

　　跟踪。stop()；//关闭摄像头

　　}

　　};

　　/脚本

　　/body

　　/html

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

　　传给后台的是个base64码

　　下面是我用某视频剪辑软件传给后台的代码

　　var param={

　　文件：图像_代码2

　　}

　　var a=JSON。stringify(param)；

　　上传(甲)百分之五十.然后((res)={

　　控制台。日志(分辨率)；

　　});

　　下面是我的服务器端编程语言(专业超文本预处理器的缩写)后台接收代码

　　公共函数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().

　　$savepath= ./upload/ .$ name//将图片存到的位置

　　file_put_contents($savepath，$ data)；//将内容写入文件

　　$ this-Ajax返回(array( status = 0 ， data =$ save path))；

　　}

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