本文例項為大家分享了小程式實現上傳視訊功能的具體程式碼，供大家參考，具體內容如下

.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: '上傳成功',duration: 1000,mask: true
 })
 setTimeout(function () {
 that.backHtml();
 },1000)
 } else if (data.status == 2) {
 wx.showToast({
 title: '檔案過大',mask: true
 })
 }
 }
 },fail: function () {
 wx.showToast({
 title: '上傳失敗',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;
}

為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。