微信小程序cameraContext拍摄的视频或照片上传后端，不需要处理实时监听的ArrayBuffer格式的视频数据，只需要直接使用wx.uploadFile上传后端，简单好用（带前后端代码）

最终方案请直接看文章最后！

最近在做一个微信小程序录制视频（图片也是一样的逻辑），然后上传后端的功能，使用的是微信小程序提供的cameraContext实例，具体官方文档请参考：

CameraContext | 微信开放文档

然后发现录制好后，成功的响应信息response中存的都是地址：

tempThumbPath - 封面图片文件的临时路径 (本地路径)：
tempThumbPath: "http://tmp/8tuxDZnK7tdt678c62402deaa133e9dbf62f746f1f23.jpg",tempVideoPath - 视频的文件的临时路径 (本地路径，特别需要注意：微信开发工具里上传的视频格式为webm，真机上为mp4。)
tempVideoPath: "http://tmp/ZCoaEV8mrjDk0d2caffb008ec28bcef88d60d1272031.webm"

本来想直接和后端进行交互，将视频文件直接传送给后端，发现这两个地址都是url字符串，需要拿到真实的视频数据才可以，于是在找到了获取实时录制的视频数据的方法，获取摄像头当前帧图像：

  /*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log("onLoad options", options)this.cameraContext = cameraContext;//this.setCameraSize();// 获取 Camera 实时帧数据// context.onCameraFrame()返回视频图像的监听器this.listener = this.cameraContext.onCameraFrame((frame) => {// frame.data 就是视频数据 格式是ArrayBufferconsole.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)this.videoFile = frame.data;});}// 在视频开始录制startRecord中调用开始监听的方法
this.listener.start() // 开始监听帧数据// 在视频结束录制stopRecord中调用停止监听的方法
this.listener.stop(this); // 停止监听帧数据

打印后发现videoFile是ArrayBuffer格式的数据：

因此想把ArrayBuffer转换成Blob格式的数据，再传给后端，发现微信小程序暂不支持Blob格式数据，因此放弃。

CSDN上倒是有个兄弟转成了Base64，但是有点过于复杂，有需要可以看看

微信小程序onCameraFrame获取的ArrayBuffer转为base64图片的方法

最终还是去官网找到了解决方案：

官方说明文档：

微信小程序将将本地资源上传到服务器

微信小程序代码：

第一个参数video就是上面的tempVideoPath - 视频的文件的临时路径

  upRecord: (video, token, type) => {let formData = { token: "123qwe",type: "SV",};wx.uploadFile({url: PATH.PATH_UP_RECORD,//这是你自己后台的连接filePath: video,name:"file",//后台要绑定的名称header: {"Content-Type": "multipart/form-data"},//参数绑定formData: formData,// HTTP 请求中其他额外的 form datasuccess:function(ress){console.log('上传成功，返回内容是: ', ress);wx.showToast({title: '上传成功',})},fail: function(ress){console.log("。。上传服务器 失败", ress);wx.showToast({title: '上传失败',})}})},

后端代码：

@RequestParam("file") MultipartFile file 这个请求参数名，

需要和上面的name(name:"file",//后台要绑定的名称)对应

 @RequestMapping(value = "/upVideo", method = RequestMethod.POST)public ResponseEntity<JSONObject> upVideo(@RequestParam("file") MultipartFile file,@RequestParam String token,@RequestParam String type) {JSONObject json = new JSONObject();try {if (file.isEmpty() || StringUtils.isBlank(token)) {log.info("上传失败，上传数据存在空值 token={}", token);json.put("STATUS", "ERROR");json.put("MSG", "上传失败，上传数据存在空值");return new ResponseEntity<>(json, HttpStatus.BAD_REQUEST);}//存放地址String path = "D:\\20220907\\video";//如果父文件夹不存在 则创建文件夹 文件夹为path,视频名字file.getOriginalFilename()File filepath = new File(path, Objects.requireNonNull(file.getOriginalFilename()));if (!filepath.getParentFile().exists()) {filepath.getParentFile().mkdirs();}File fi = new File(path + File.separator + file.getOriginalFilename());//下载到本地file.transferTo(fi);//获取绝对路径String localAddress = fi.getAbsolutePath();log.info("存入本地文件地址:" + localAddress);//获取后缀名String suffix = localAddress.substring(localAddress.lastIndexOf("."), localAddress.length());log.info("后缀名:" + suffix);json.put("STATUS", "200");json.put("MSG", "上传视频成功");return new ResponseEntity<>(json, HttpStatus.OK);} catch (Exception e) {log.error("系统异常，上视频失败", e);return new ResponseEntity<>(json, HttpStatus.INTERNAL_SERVER_ERROR);//500,系统异常}}

仅为测试调试代码，有需要请调整优化，执行完可以看到文件确实存到后端服务器的本地了：

收工

微信小程序cameraContext拍摄的视频或照片上传后端，不需要处理实时监听的ArrayBuffer格式的视频数据，只需要直接使用wx.uploadFile上传后端，简单好用（带前后端代码）相关推荐

新增微信小程序、WebRTC连麦直播多项能力，即构实时音视频SDK再升级
经过2018年小半年的闭关练功,即构ZEGO团队铸造了不少黑科技.本文将为你带来即构ZEGO实时语音视频SDK近半年新增能力和功能优化的最新进展. 更懂应用场景的语音视频云作为全球领先的实时语音视频 ...
小程序: wx.uploadFile上传文件保持原文件名的方法
其实很简单: formData中携带文件名即可! 废放不说,上源码: 小程序端: js: uploadSendFile(file){ //fi ...
ios微信本地视频上传到服务器,ios本地视频wx.uploadFile上传
//上传视频 uploadVideo:function(){ let _this = this; let list = ['camera', 'album']; wx.showActionSheet( ...
小程序中如何实时监听app.js中globalData的数据变化
使用Object.defineProperty(obj, prop, desc)来进行发布订阅 obj 是需要定义属性的当前对象 prop 当前需要定义的属性名 desc 属性描述符 App({onL ...
微信小程序开发总结与心得
0 前言最近的工作重心一直在小程序,也开发了几个小程序,对小程序开发的流程及相关技术相对比较熟悉,在开发过程中也总结了一些心得经验.了解一些小程序文档上没有的东西.踩了一些坑.所以想着写篇文章记录下 ...
SSM同城拼车微信小程序的开发计算机毕设源码20625
摘要伴随着科技进步和经济全球化,人民生活水乎丕断提高,拥有私家车的人群也越来越庞大.据统计,我国汽车保有量持续高速度增长,众多的车辆上路,是造成交通拥堵的最主要原因.除此之外,随着经济高速发展,城市 ...
微信小程序+百度AI OCR二代身份证识别
微信小程序内虽然有OCR识别功能但是收费是按次计费的,还是选用了百度ai提供的OCR识别二代身份证. // 上传人面像upFileFront:function(e){let type = e.cur ...
微信小程序无埋点数据采集方案
相信业务团队对这样的场景不会太陌生: 打点需求:每新上一个功能,数据产品便会同步加上打点需求,当数据打点上线后一段时间,数据产品/业务产品便会针对数据的转化率分析和对业务需求的调整: 打点正确性验证: ...
微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
前言: 现在很多程序上都有左滑删除的效果,其实实现很简单,今天我们主要来记录一下小程序的左滑删除的实现过程. 效果图: 实现效果: 当我们在该条记录上进行左滑操作时,整条记录跟着向左移动,同时右侧的删 ...

微信小程序cameraContext拍摄的视频或照片上传后端，不需要处理实时监听的ArrayBuffer格式的视频数据，只需要直接使用wx.uploadFile上传后端，简单好用（带前后端代码）

微信小程序cameraContext拍摄的视频或照片上传后端，不需要处理实时监听的ArrayBuffer格式的视频数据，只需要直接使用wx.uploadFile上传后端，简单好用（带前后端代码）相关推荐

最新文章

热门文章