1. 程式人生 > >微信小程式上傳圖片,視訊及預覽

微信小程式上傳圖片,視訊及預覽

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

})