微信小程序> 小程序上传视频

小程序上传视频

浏览量:1165 时间: 来源:wild_guiqulaixi

小程序上传视频

    • .js文件
    • .wxml
    • .wxss

.js文件

// miniprogram/pages/message/messageForm/messageForm.jsPage({/** * 页面的初始数据 */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;}

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎