欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)上傳視頻功能

 更新時間:2020年08月18日 11:18:37   作者:wild_guiqulaixi  
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)上傳視頻功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序?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) {
 // 這個就是最終拍攝視頻的臨時路徑了
 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',//服務(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, "");//重點
 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 () {

 },

 /**
 * 用戶點擊右上角分享
 */
 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上傳操作匯總》進行學(xué)習(xí)。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript動畫效果類封裝代碼

    javascript動畫效果類封裝代碼

    javascript動畫效果類封裝代碼...
    2007-08-08
  • 小程序?qū)崿F(xiàn)簡單語音聊天的示例代碼

    小程序?qū)崿F(xiàn)簡單語音聊天的示例代碼

    這篇文章主要介紹了小程序?qū)崿F(xiàn)簡單語音聊天的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • layui當點擊文本框時彈出選擇框,顯示選擇內(nèi)容的例子

    layui當點擊文本框時彈出選擇框,顯示選擇內(nèi)容的例子

    今天小編就為大家分享一篇layui當點擊文本框時彈出選擇框,顯示選擇內(nèi)容的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JavaScript 過濾關(guān)鍵字

    JavaScript 過濾關(guān)鍵字

    本文主要介紹了JavaScript過濾關(guān)鍵字的方法。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • React類組件轉(zhuǎn)換成函數(shù)式組件

    React類組件轉(zhuǎn)換成函數(shù)式組件

    Hooks讓我們?yōu)橄嗤墓δ芫帉懜俚拇a,我們需要編寫的代碼越少,我們就可以越快地啟動應(yīng)用程序,hooks需要在函數(shù)組件中使用,您不能在 React 類中使用 hooks,函數(shù)式的 React 組件更加現(xiàn)代,并支持有用的 hooks,現(xiàn)在流行把舊式的類組件轉(zhuǎn)換為函數(shù)式組件
    2024-01-01
  • javascript:void(0)是什么意思示例介紹

    javascript:void(0)是什么意思示例介紹

    Javascript中void是一個操作符,該操作符指定要計算一個表達式但是不返回值,有不了解的朋友可以參考下本文
    2013-11-11
  • JS庫 Highlightjs 添加代碼行號的實現(xiàn)代碼

    JS庫 Highlightjs 添加代碼行號的實現(xiàn)代碼

    Highlightjs是一款優(yōu)秀的代碼高亮Js組件,可以很方便地對各種語言編寫的代碼添加語法高亮樣式。本文重點給大家介紹Highlightjs 添加代碼行號的實現(xiàn)代碼,需要的朋友參考下吧
    2017-09-09
  • js url傳值中文亂碼之解決之道

    js url傳值中文亂碼之解決之道

    因為js url在傳值的過程中使用的是js自己默認的字符集編碼規(guī)則,我們必須把它轉(zhuǎn)成屬于我們自己的編碼規(guī)格
    2009-11-11
  • 簡單獲取鍵盤的KeyCode

    簡單獲取鍵盤的KeyCode

    簡單獲取鍵盤的KeyCode...
    2006-09-09
  • js中的循環(huán)方式及各種遍歷的方法

    js中的循環(huán)方式及各種遍歷的方法

    本文主要介紹了js中的循環(huán)方式及各種遍歷的方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12

最新評論