微信小程序上傳圖片，視頻及預覽

wxml

<!-- 圖片預覽 -->
<view class='preview-warp' wx:if="{{urls}}">
  <image  src='{{urls}}' />
</view>
<view class="prew_video" hidden="{{chooesVideo==''}}">
  <video bindfullscreenchange="bindVideoScreenChange" src="{{chooesVideo}}" ></video>
</view>

<!-- 按鈕組 -->
<view class='upimg' bindtap='chooseImg'>上傳圖片</view>
<view class='upvideo' bindtap='chooseVideo'>上傳視頻</view>

wxss

/* 預覽 */
.preview-warp{
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*居中對齊*/
  position: relative;
  background-color: #fff;
}
.prew_video{
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*居中對齊*/
    position: relative;
    background-color: #fff;
}
.prew_video[hidden]{
    display: none;
}
.prew_video .play{
    width: 48rpx;
    height: 48rpx;
}

/* 上傳按鈕組 */
.upimg{
  width: 49%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  float: left;
  background: #41C7DB;
  text-align: center;
  border: 1px solid #000;
  /* border-left: 1px solid #000; */
}
.upvideo{
  width: 49.5%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  float: left;
  text-align: center;
  border: 1px solid #000;
  background: #fff
}

js

//index.js
var app = getApp()
var count = 0;
Page({
  data: {
    chooesVideo:'',    //上傳視頻地址
    tipHide: false,
    chooseTypeHide: true,
  },

  /**
     * 生命周期函數--監聽頁面加載
     */
  onLoad: function (options) {
    console.log(options.status)
  },
  /**
     * 生命周期函數--監聽頁面初次渲染完成
     */
  onReady: function (res) {
    this.videoContext = wx.createVideoContext('prew_video');
  },/**
   * 上傳圖片
   */
  chooseImg:function() {
    let that = this
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        console.log(res)
        var tempFilePaths = res.tempFilePaths
        that.data.images = tempFilePaths
        // 多圖片
        // that.data.urls = that.data.urls.concat(tempFilePaths)
        // 單圖片
        that.data.urls = tempFilePaths[0]
        that.setData({
          images: tempFilePaths[0],
          urls: that.data.urls
        })

      }
    })
  },

  /**
   * 上傳視頻
   */
  chooseVideo:function(){
    let that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: 'back',
      success: function (res) {
        that.setData({
          chooesVideo: res.tempFilePath
        })
      }
    })
  },

  /**
     * 全屏改變
     */
  bindVideoScreenChange: function (e) {
    var status = e.detail.fullScreen;
    var play = {
      playVideo: false
    }
    if (status) {
      play.playVideo = true;
    } else {
      this.videoContext.pause();
    }
    this.setData(play);
  }

})