UI效果 
wxml

1. <view class="prew_img" wx:for="{{chooesImage}}" wx:key="{{index}}" style="background-image:url({{item}});">
2. <view class="bind" data-group="{{chooesImage}}" data-current="{{item}}" bindtap="bindPreviewImage"></view>
3. <image class="delete" data-index="{{index}}" bindtap="bindDeleteImage" src="../../static/img/delete.png"></image>
4. </view>
5. <view class="prew_video" hidden="{{chooesVideo==''}}">
6. <video id="prew_video"
7. autoplay="true"
8. muted="{{!playVideo}}"
9. bindfullscreenchange="bindVideoScreenChange"
10. src="{{chooesVideo}}" ></video>
11. <image class="play" bindtap="bindPreviewVideo" src="../../static/img/play.png"></image>
12. <image class="delete" bindtap="bindDeleteVideo" src="../../static/img/delete.png"></image>
13. </view>
14. <image class="upload" hidden="{{chooesImage.length==9||chooesVideo!=''}}" bindtap="bindChooseMedia" src="../../static/img/add.png"></image>

在这我把video先自动播放，不然全屏会失败，选择加载后就静音播放

wxss

1. .prew_img,.upload,.prew_video{
2. width: 148rpx;
3. height: 148rpx;
4. margin: 0 30rpx 30rpx 0;
5. }
6. .prew_img{
7. position: relative;
8. background: no-repeat center center;
9. background-size: cover;
10. }
11. .prew_img .bind{
12. width: 100%;
13. height: 100%;
14. }
15. .prew_img .delete,.prew_video .delete{
16. position: absolute;
17. top: -16rpx;
18. right: -16rpx;
19. width: 32rpx;
20. height: 32rpx;
21. z-index: 9;
22. }
23. .prew_video{
24. display: flex;
25. align-items: center; /*垂直居中*/
26. justify-content: center; /*居中对齐*/
27. position: relative;
28. background-color: #000;
29. }
30. .prew_video[hidden]{
31. display: none;
32. }
33. .prew_video .play{
34. width: 48rpx;
35. height: 48rpx;
36. }
37. /* 坑~ video必须先渲染出来，不然全屏会横屏 */
38. #prew_video{
39. position: absolute;
40. left: 0;
41. top: 0;
42. width: 1rpx;
43. height: 1rpx;
44. }

js

1. Page({
2. /**
3. * 页面的初始数据
4. */
5. data: {
6. tipHide: false,
7. chooseTypeHide: true,
8. chooesImage: [],
9. chooesVideo: '',
10. playVideo: false
11. },