微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的。本文知识点:1、微信小程序选择图片wx.chooseImage()接口的使用2、微信小程序选择视频wx.chooseVideo()接口的使用3、微信小程序上传文件接口wx.uploadFile()的使用4、nodejs上传文件multer模块的使用效果注意:1、在微信开发工具里选择视频接口wx.chooseVideo()返回的数据有视频缩略图字段(thumbTempFilePath),在真机上没有;2、上传视频时,compressed压缩字段无效,不知是所有手机无效还是部分,本文测试时,使用的是华为mate9,这也是小程序的深坑之一;3、上传视频时,使用录制方式,华为mate9视频大小过大,录制的6秒钟视频就有20多M,网上说好像mate9的视频编码格式是h265,普通手机为h264,也许是无法压缩问题引起的;所以尝试了另外一种方式录制,使用camera组件,这种方式需要自己自定义录制界面:点击这里。小程序代码在utils下的wechat.js文件里添加代码,如有则忽略/***从本地相册选择图片或使用相机拍照。*@param{number}count最多可选图片的数量*@param{array}sizeTypeoriginal原图,compressed压缩图*@param{array}sourceTypealbum从相册选图,camera使用相机*/staticchooseImage(count1,sizeType['compressed'],sourceType['album','camera']){returnnewPromise((resolve,reject)wx.chooseImage({count,sizeType,sourceType,success:resolve,fail:reject}));}/***拍摄视频或从手机相册中选视频,返回视频的临时文件路径。*@param{boolean}compressed是否压缩*@param{array}sourceTypealbum从相册选图,camera使用相机*@param{number}maxDuration拍摄视频最长拍摄时间,单位秒。最长支持60秒*/staticchooseVideo(compressedtrue,sourceType['album','camera'],maxDuration60){returnnewPromise((resolve,reject)wx.chooseVideo({sourceType,compressed,maxDuration,success:resolve,fail:reject}));}/***将本地资源上传到开发者服务器,客户端发起一个HTTPSPOST请求*@param{string}url开发者服务器url*@param{string}filePath要上传文件资源的路径*@param{string}name*@param{object}formDataHTTP请求中其他额外的formdata*/staticuploadFile(url,filePath,name,formData{openid:"test"}){returnnewPromise((resolve,reject){letopts{url,filePath,name,formData,header:{'Content-Type':"multipart/form-data"},success:resolve,fail:reject};wx.uploadFile(opts);});}jsletappgetApp();letwechatrequire("../../utils/wechat");Page({data:{tempImagePath:"",//拍照的临时图片地址tempThumbPath:"",//录制视频的临时缩略图地址tempVideoPath:"",//录制视频的临时视频地址type:"chooseImage",},onLoad(){},camera(e){let{type}e.target.dataset;this.setData({type})console.log("开始上传准备",type"chooseImage"?"图片":"视频");//拍照if(type"chooseImage"){console.log("选择图片");wechat.chooseImage().then(d{let{path,size}d.tempFiles[0];this.setData({tempImagePath:path,});returnwechat.uploadFile("https://xx.xxxxxx.cn/api/upload",path,"uploadImg")}).then(d{console.log(d);}).catch(e{console.log(e);})}//录视频elseif(type"chooseVideo"){wechat.chooseVideo().then(d{console.log(d);let{tempFilePath,thumbTempFilePath,size}d;this.setData({//tempThumbPath:thumbTempFilePath,tempVideoPath:tempFilePath,});returnwechat.uploadFile("https://xx.xxxxxx.cn/api/upload",tempFilePath,"tempVideoPath");}).then(d{console.log(d);}).catch(e{console.log(e);})}}})htmlviewclass"view"viewclass"window"imageclass"cover-9"src"{{tempImagePath}}"bindtap"img"wx:if"{{type'chooseImage'}}"/imagevideoclass"cover-9"src"{{tempVideoPath}}"poster"{{tempThumbPath}}"wx:if"{{type'chooseVideo'}}"/videoviewclass"window-2"buttonbindtap"camera"type"primary"data-type"chooseImage"图片/buttonbuttonbindtap"camera"type"primary"data-type"chooseVideo"视频/button/view/view/viewcsspage{height:100%;}.view{width:100%;height:100%;}.window{width:100%;height:100%;}.window-2{display:flex;flex-direction:row;}.cover-9{width:728rpx;height:80%;margin:010rpx;border:2rpxsolid;border-radius:5px;}button{margin:010rpx;width:100%;}nodejs代码constmulterrequire('multer');letpathrequire("path");//上传文件配置conststoragemulter.diskStorage({//文件存储位置destination:(req,file,cb){cb(null,path.resolve(__dirname,'../uploads/tmp/'));},//文件名filename:(req,file,cb){cb(null,`${Date.now()}_${Math.ceil(Math.random()*1000)}_multer.${file.originalname.split('.').pop()}`);}});constuploadCfg{storage:storage,limits:{//上传文件的大小限制,单位bytesfileSize:1024*1024*20}};router.post("/api/upload",async(req,res){letuploadmulter(uploadCfg).any();upload(req,res,async(err){if(err){res.json({path:`//uploads/tmp/${uploadFile.filename}`});console.log(err);return;};console.log(req.files);letuploadFilereq.files[0];res.json({path:`//uploads/tmp/${uploadFile.filename}`});});})1.
后端打印2.
上传的文件意外金喜的博客:http://blog.csdn.net/zzwwjjdj1更多小程序文章:http://blog.csdn.net/zzwwjjdj1/article/details/79351547
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...相关推荐
- 微信小程序-从相册获取图片,视频 使用相机拍照,录像上传+服务器(nodejs版)接收
在本文 微信小程序-从相册获取图片 使用相机拍照 本地图片上传之前需要看看 微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...
- 微信小程序chooseImage(从本地相册选择图片或使用相机拍照)
一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({data:{src:"../im ...
- 微信小程序:选择从本地相册选择图片或使用相机拍照
先弹出操作菜单,选择拍照还是从相册选择.根据用户选择进行相应操作.如图所示 代码如下: browse:function(){let that = this;wx.showActionSheet({it ...
- QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式...
QRCode 扫描二维码.扫描条形码.相册获取图片后识别.生成带 Logo 二维码.支持微博微信 QQ 二维码扫描样式 参考链接:https://github.com/bingoogolapple/B ...
- Unity调用android相册获取图片或视频
Unity调用android相册获取图片或视频 (此文章对有unity基础和对环境配置有基础的童嚡容易看懂) 因为项目上用到,在百度了很多大佬的文章后,陆陆续续踩了很多坑,可能是我哪里设置的不对,大部 ...
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml--> <button st ...
- 微信小程序wx.login()获取openid,附:前端+后端代码(超详细版)
微信小程序开放了微信登录的api,无论是个人还是企业申请的小程序均可使用. 首先创建一个项目,把这些代码都清空,我们自己写! 然后,开始写了! 首先index.wxml,写一个button用于发起登录 ...
- 微信小程序 — 打开相册选择图片功能
点击页面的相册按钮如何打开系统相册.选择图片: <text class="nav-item1" bindtap="navToalbum">相册< ...
- 加密相册-加密保护照片视频账号日记通讯录密码锁住隐私相片相册卫士图片管家隐藏小电影的保险箱柜
https://itunes.apple.com/app/id1458351572?mt=8 史上最好用, 最强大的隐私保护App,为您加密存储照片.视频.账号.日记.联系人. 加密相册是怎么运作的 ...
最新文章
- [网络流24题-7]圆桌问题
- 1114 Family Property (25 分)【难度: 中/ 知识点: 并查集】
- mxnet基础到提高(44)-ndarray.arange创建行向量
- linux用avk怎么提取字符,在Linux下进行视频音频格式转换提取等
- 90TB显存!英伟达发布新一代SuperPod超算,AI算力新巅峰!
- j2me安装_Java第一步 JDK安装
- 基于JAVA+SpringMVC+Mybatis+MYSQL的奖助学金贷款信息管理系统
- ORM + 数据库链接池
- BGP路径属性分类与实验(华为设备)
- 六、Shell echo命令
- 为什么说索引会加速查找过程
- 蓝桥杯 C语言 试题 历届试题 网络寻路
- BXP无盘介绍(转)
- 计算机初级培训 ppt,《计算机初级培训》PPT课件
- 新版FMEA软件参数图(P图)免费申请试用(FMEAHunter)
- 论文笔记:Composable Sparse Fine-Tuning for Cross-Lingual Transfer
- 云计算能从事哪些岗位 未来职业发展怎么规划
- 印象笔记mac版 同步问题_Typora和印象笔记的完美同步及备份
- matlab和Excel的交互 非xlsread和xlswrite(1-Excel基础)
- 如何进行SYN攻击防范