小程序实现上传视频功能


Posted in Javascript onAugust 18, 2020

本文实例为大家分享了小程序实现上传视频功能的具体代码,供大家参考,具体内容如下

.js文件

// miniprogram/pages/message/messageForm/messageForm.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 webServer: 'https://xxxx.xxx.com',
 src: '',
 webviewshow: 'hide',
 webviewurl: '',
 gid: "",
 uid: '',
 duration: '',
 height: '',
 size: '',
 width: '',
 ThumbPath: false,
 videoshow: 'hide'
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 this.setData({
 gid: options.gid,
 uid: options.uid
 })
 },

 chooseVideo: function () {
 var that = this
 wx.chooseVideo({
 success: function (res) {
 that.setData({
 src: res.tempFilePath,
 })
 }
 })
 },
 getLocalVideo: function () {
 var that = this;
 var session_key = wx.getStorageSync('session_key');
 wx.chooseVideo({
 maxDuration: 10,
 success: function (res1) {
 // 这个就是最终拍摄视频的临时路径了
 that.setData({
 src: res1.tempFilePath,
 duration: res1.duration,
 height: res1.height,
 size: res1.size,
 width: res1.width,
 videoshow: 'thumb'
 })
 wx.showToast({
 title: '选择成功',
 icon: 'succes',
 duration: 2000,
 mask: true
 })
 },
 fail: function () {
 console.error("获取本地视频时出错");
 }
 })
 },
 uploadvideo: function () {
 var that = this;
 wx.showLoading({
 title: '上传中',
 })
 var src = this.data.src;
 if (src) {
 that.setData({
 ThumbPath: true
 })
 }
 wx.uploadFile({
 url: that.data.webServer + 'xxxxxx',//服务器接
 formData: {
 'uid': that.data.uid,
 'gid': that.data.gid,
 'duration': that.data.duration,
 'height': that.data.height,
 'size': that.data.size,
 'width': that.data.width
 },
 method: 'POST',//这句话好像可以不用
 filePath: src,
 header: {
 'content-type': 'multipart/form-data'
 },
 name: 'files',//服务器定义的Key值
 success: function (e) {
 wx.hideLoading();
 if (typeof e.data != 'object') {
 e.data = e.data.replace(/\ufeff/g, "");//重点
 var data = JSON.parse(e.data);
 if (data.status == 1) {
 wx.showToast({
 title: '上传成功',
 icon: 'succes',
 duration: 1000,
 mask: true
 })
 setTimeout(function () {
 that.backHtml();
 }, 1000)
 } else if (data.status == 2) {
 wx.showToast({
 title: '文件过大',
 icon: 'succes',
 duration: 1000,
 mask: true
 })
 }
 }
 },
 fail: function () {
 wx.showToast({
 title: '上传失败',
 icon: 'succes',
 duration: 1000,
 mask: true
 })
 }
 })
 },
 backHtml: function () {
 var that = this;
 wx.reLaunch({
 url: '/pages/index/index?gid=' + this.data.gid
 })
 },
 

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

.wxml

<view class='contbox'>
 <view class='thumbbox'>
 <video class="{{videoshow}}" src="{{src}}"></video>
 </view>
 <!-- 提交 -->
 <button bindtap='getLocalVideo' class="btn2" type="primary" form-type='submit'>选择视频</button>
 <button type="default" class="btn2" bindtap="chooseVideo" bindtap='uploadvideo' type="warn" form-type='reset'>上传视频</button>
</view>

.wxss

.thumbbox {
 display: flex;
 justify-content: center;
 align-items: center;
}

小程序实现上传视频功能

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
解决Mac安装thrift因bison报错的问题
May 17 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
如何在selenium中使用js实现定位
Aug 18 #Javascript
vue实现移动端input上传视频、音频
Aug 18 #Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 #Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 #Javascript
js实现简单扫雷
Nov 27 #Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 #Javascript
javascript实现扫雷简易版
Aug 18 #Javascript
You might like
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
python实现矩阵乘法的方法
2015/06/28 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
民生工程实施方案
2014/03/22 职场文书
个人工作年终总结
2015/03/09 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python