微信小程式視訊上傳
阿新 • • 發佈:2018-11-12
1、wxml
<video id='video{{idx}}' show-center-play-btn="{{true}}" src='{{videoUrl}}' controls="true" objectFit="cover">
</video>
<button class="start_btn" bindtap="addVideoTap">新增視訊</button>
2、js
Page({ /** * 頁面的初始資料 */ data: { videoUrl:'' }, //點選上傳視訊按鈕 addVideoTap: function () { var that = this; //選擇上傳視訊 wx.chooseVideo({ sourceType: ['camera'], //視訊選擇的來源 //sizeType: ['compressed'], compressed:false,//是否壓縮上傳視訊 camera: 'back', //預設拉起的是前置或者後置攝像頭 success: function (res) { //上傳成功,設定選定視訊的臨時檔案路徑 that.setData({ videoUrl: res.tempFilePath }); //在上傳到伺服器前顯示載入中 wx.showLoading({ title: '載入中...', icon: 'loading', }); //上傳視訊 wx.uploadFile({ url: '/upload/service/uploadFiles', //開發者伺服器的 url filePath: res.tempFilePath, // 要上傳檔案資源的路徑 String型別!!! name: 'file', // 檔案對應的 key ,(後臺介面規定的關於圖片的請求引數) header: { 'content-type': 'multipart/form-data' }, // 設定請求的 header formData: { }, // HTTP 請求中其他額外的引數 success: function (res) { //上傳成功後隱藏載入框 wx.hideLoading(); console.log(res); }, fail: function (res) { console.log("圖片上傳失敗" + res); } }) } }) } });