vue 实现录制视频后上传到php后台借鉴代码

demo下载地址https://download.csdn.net/download/qq_39070698/10566294<body><article style="border:1px solid white;width:400px;height:400px;margin:0 auto;background-color:white;&qu

qq_39070698

3855人浏览 · 2018-07-26 18:13:32

qq_39070698 · 2018-07-26 18:13:32 发布

demo下载地址https://download.csdn.net/download/qq_39070698/10566294

<body>
    <article style="border:1px solid white;width:400px;height:400px;margin:0 auto;background-color:white;">

        <section class="experiment" style="width:320px; height:240px;border:1px solid green; margin:50px auto;">
            <div id="videos-container" style="width:320px; height:240px;">
            </div>
        </section>
        <section class="experiment" style="text-align:center;border:none; margin-top:20px;">
            <button id="openCamera">打开摄像头</button>
            <button id="start-recording" disabled>开始录制</button>
            <button id="save-recording" disabled>保存</button>
            <!--<a href="javascript:void(0)" onclick="send()">发送</a>-->
        </section>
      </article>


</script>

该demo可以通过录像生成MP4格式的文件流方便操作下面是我在vue中使用上传视频流时的代码

function saver(){
    var file = new File([recorderFile], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
        type: 'video/mp4'
    });
    console.log(file)
    var data = new FormData();
    data.append("userfile", file);
	var req = new XMLHttpRequest();
    req.open("POST", "url");
    req.send(data);
    req.onreadystatechange = function() {
    			var res = req.responseText;
		    	if(req.readyState == XMLHttpRequest.DONE && req.status == 200) {
		    		var jsonObj =  JSON.parse(res)
			       // console.log(jsonObj)
			       // console.log(jsonObj.status)
			       // console.log(jsonObj.data)
			        that.videolist = [{url:jsonObj.data,introduce:''}]
			        console.log(that.videolist)
			    }
	}
}

该demo代码较多不能一一贴出来,demo下载后直接可以在浏览器运行,详细情况可以根据业务需求自己倒腾

后台是PHP顺便也给贴出来希望对大家有帮助

 public function upload($name="video",$path='video'){
        $file   = $this->request->file('userfile');
        $result = $file->move('.' . DS .'upload'. DS . $path . DS);
        if ($result) {
            $avatarSaveName = str_replace('//', '/', str_replace('\\', '/', $result->getSaveName()));
            $savepath = "./upload/".$path.'/'.$avatarSaveName;
            $this->ajaxReturn(array('status'=>'0','data'=>$savepath));
        }else{
            $this->ajaxReturn(array('status'=>'1','data'=>$file->getError()));
        }
        
    }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^