微信小程序上传图片，视频及预览

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

})

 

转载于:https://www.cnblogs.com/zxf100/p/9924133.html