小程序?qū)崿F(xiàn)上傳視頻功能
更新時(shí)間：2020年08月18日 11:18:37 作者：wild_guiqulaixi
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)上傳視頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)上傳視頻功能的具體代碼，供大家參考，具體內(nèi)容如下
.js文件
// miniprogram/pages/message/messageForm/messageForm.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
webServer: 'https://xxxx.xxx.com',
src: '',
webviewshow: 'hide',
webviewurl: '',
gid: "",
uid: '',
duration: '',
height: '',
size: '',
width: '',
ThumbPath: false,
videoshow: 'hide'
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
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) {
// 這個(gè)就是最終拍攝視頻的臨時(shí)路徑了
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("獲取本地視頻時(shí)出錯(cuò)");
}
})
},
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',//服務(wù)器接
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',//服務(wù)器定義的Key值
success: function (e) {
wx.hideLoading();
if (typeof e.data != 'object') {
e.data = e.data.replace(/\ufeff/g, "");//重點(diǎn)
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
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
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;
}
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
更多精彩內(nèi)容請參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了laydate.js日期時(shí)間選擇插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
javascript計(jì)算當(dāng)月剩余天數(shù)(天數(shù)計(jì)算器)示例代碼
本文介紹了利用Javascript在網(wǎng)頁上計(jì)算當(dāng)前月份的剩余天數(shù)的方法，大家參考使用吧2014-01-01
js實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
淺析使用BootStrap TreeView插件實(shí)現(xiàn)靈活配置快遞模板
這篇文章主要介紹了使用bootstrap-treeview插件實(shí)現(xiàn)靈活配置快遞模板的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
判斷是否存在子節(jié)點(diǎn)的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄袛嗍欠翊嬖谧庸?jié)點(diǎn)的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了js過濾HTML標(biāo)簽實(shí)現(xiàn)方法,以完整實(shí)例形式分析了JavaScript使用正則表達(dá)式過濾HTML標(biāo)簽的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
本文給大家匯總介紹了集中常見的功能，十分的實(shí)用，有需要的小伙伴可以參考下。2015-06-06
前端JavaScript?6?種主流接口請求技術(shù)全解
這篇文章主要介紹了前端JavaScript?6?種主流接口請求技術(shù)的相關(guān)資料,包括XMLHttpRequest、FetchAPI、Axios、jQueryAjax、WebSocket和GraphQL,并提供了每種方案的基礎(chǔ)用法、高級配置、優(yōu)點(diǎn)、缺點(diǎn)及適用場景,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
Webpack 本身功能比較少,只能處理 js 資源,一旦遇到 css 等其他資源就會報(bào)錯(cuò),本文給大家講解Webpack介紹和基本使用指南,感興趣的朋友一起看看吧2024-02-02
這篇文章主要為大家介紹了jsPDF導(dǎo)出PDF寬大于高異常處理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08