小程序实现上传视频功能


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解析xml实现省市县三级联动的方法
Jul 25 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
javascript绘制简单钟表效果
Apr 07 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脚本的10个技巧(3)
2006/10/09 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
Python中实现对list做减法操作介绍
2015/01/09 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
实习自我评价怎么写
2013/12/02 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
有创意的广告词
2014/03/18 职场文书
干部考核评语
2014/04/29 职场文书
国防教育标语
2014/10/08 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
春秋淹城导游词
2015/02/11 职场文书
详解OpenCV曝光融合
2022/04/29 Python