小程序实现上传视频功能


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 相关文章推荐
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
jQuery的框架介绍
May 11 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 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/02/15 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
杨氏矩阵查找的JS代码
2013/03/21 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
Javascript复制实例详解
2016/01/28 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python中argparse模块用法实例详解
2015/06/03 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
python分布式计算dispy的使用详解
2019/12/22 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
八年级美术教学反思
2014/02/02 职场文书
物业管理专业求职信
2014/06/11 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL