h5进行手机录像传给后端base64格式

通过input=file方式兼容比较好一些。

html部分代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>h5手机录像</title>
</head>
<body>
<div class="next_submit"><span>开始录制视频</span><input type="file"  accept="video/*"  id="uploadVideo"  capture="camcorder"/></div>
</body>
</html>

js代码块

let videoBtn=document.getElementById("uploadVideo");
var videoBase=""function uploadVideo(e) {let files = e.target.files;if (files && files.length > 0) {let file = files[0];//对录制的视频限制大小if (file.size > 8388608) {alter("录制视频时间过长");return;} else if (file.size < 211057) {alter("录制视频时间太短");return;}let reader = new FileReader();//将视频文件转换为base64格式reader.readAsDataURL(file);reader.onload=function() {if (reader.result) {videoBase = reader.result;//请求后端，传递数据} else {alter("视频录制异常");}});} else {alter("请重新录制视频");}
}//监听change事件
videoBtn.onchange=function(){uploadVideo(e)
}

希望可以帮助到大家

h5进行手机录像传给后端base64格式相关推荐

ajax传递多个base64,H5移动开发Ajax上传多张Base64格式图片到服务器
这篇文章主要为大家详细介绍了H5移动开发Ajax上传多张Base64格式图片到服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下废话不多说,直接看代码吧 1.上传组件 2.展示添加上的图片 v ...
[微信小程序] 单张、多张图片上传(图片转base64格式)实践经验
本文首发自个人自有博客:[FaxMiao个人博客],一个关注Web前端开发技术.关注用户体验.记录前端点滴,坚持更多原创,为大家提供高质量技术博文! 定义初始数据: data: {imgList: [ ...
el-upload上传图片成功，详情页回显base64格式的图片
上传图片,并传给后端图片格式是base64.在详情页需要回显图片在el-upload上,我们发现官网里图片回显时,文件数组里要配置好name和url,如下图: 当我们需要回显base64格式的图片时, ...
ajax异步上传图片文件并将其转换为base64格式
ajax异步上传图片文件并将其转换为base64格式高级浏览器上面,可以直接使用html5的FileReader,实现获取上传文件的base64格式,并以字符串形式提交.对于IE9以下的浏览器,就得 ...
【前端图片转化】 base64格式转为 File文件类型
下面的函数能将base664格式用于已知bseae64 转File格式上传求点赞!! 关注!! 收藏 !! base64格式的图片不能直接上传到oss图片服务器的,需要转换成file文件流的形式上 ...
H5手机录像并获取录像内容转base64
在这里插入代码<!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
前端js调用摄像头进行录像并传到后端
js调用摄像头录像并传到后端参考自https://juejin.im/entry/5b91e8e7f265da0ac55e2cd6?tdsourcetag=s_pcqq_aiomsg 项目要求前端h ...
H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...

h5进行手机录像传给后端base64格式

html部分代码

js代码块

h5进行手机录像传给后端base64格式相关推荐

最新文章

热门文章