1. 程式人生 > >微信小程式視訊上傳

微信小程式視訊上傳

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);
            }
          })      
      }
    })
  }  
  
});