小程式上傳視訊
阿新 • • 發佈:2018-12-30
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 }) }, 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 () { } })
<view class='contbox'> <view class='thumbbox'> <video class="{{videoshow}}" src="{{src}}"></video> </view> <!-- 提交 --> <button bindtap='getLocalVideo' class="submitBtn" type="primary" form-type='submit'>選擇視訊</button> <button bindtap='uploadvideo' class="gobackBtn" type="warn" form-type='reset'>上傳視訊</button> </view>
page { height: 100%; } .container { display: flex; margin-top: 20rpx; justify-content: space-around; } .submitBtn { width: 80%; margin-top: 15px; } .gobackBtn { width: 80%; margin-top: 15px; } .loginLabel { color: gray; font-size: 15px; } .inputText { float: right; text-align: right; margin-right: 22px; margin-top: 11px; font-size: 15px; } .inputView { padding: 5px; background-color: white; line-height: 45px; border: solid 1px whitesmoke; } .thumbbox { display: flex; justify-content: center; align-items: center; } .thumb { background-size: cover !important; background-position: center !important; } .contbox{ margin-top: 50px; } .hide { display: none; } .show { display: block; } .cover{ width: 200px; height: 200px; border: 1px solid red; }