效果如图
wxml代码
<view style="padding: 5px 10px;">商品视频</view>
<view class="fr_upload">
<view wx:if="{{goods_video.length>0}}" class="fr_upload_r1">
<video bindtap='clearVideo' class="fr_upload_img" id="myVideo" src="{{goods_video_url}}" autoplay="true"></video>
</view>
<view bindtap='uploadVideo' class="fr_upload_r1">
<image mode="widthFix" class="fr_upload_img" src="../../images/18.png"></image>
</view>
</view>
wxss代码
.fr_upload {
display: flex;
flex-wrap: wrap;
align-items: center;
min-height: 100rpx;
padding: 10px;
margin-bottom: 5px;
background-color: #fff;
}
.fr_upload_r1 {
padding-bottom: calc((100% - 80px)/5);
height: calc((100% - 80px)/5);
width: calc((100% - 80px)/5);
margin-right: 20rpx;
margin-bottom: 20rpx;
border-radius: 6rpx;
}
.fr_upload_img {
display: inline-block;
position: absolute;
max-width: 100%;
width: calc((100% - 80px)/5);
height: calc((100vw - 80px)/5);
}
JS代码
Page({
/**
* 页面的初始数据
*/
data: {
goods_video_url: "",
goods_video: "",
ishide: false,
}
uploadVideo: function (e) {
let pthis = this;
wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60,
camera: 'back',
success(res) {
pthis.setData({
'ishide': true,
});
wx.showLoading({
title: '正在上传中',
});
console.log(res.tempFilePath);
let tempFilePath = res.tempFilePath; //选择定视频的临时文件路径（本地路径）
pthis.uploadfilevideo(tempFilePath);
}
})
},
uploadfilevideo:function(tempFilePath){
let pthis = this;
var url = app.util.url('entry/wxapp/uploadervideo');
wx.uploadFile({
url: url, //仅为示例，非真实的接口地址
filePath: tempFilePath,
name: 'file',
formData: {
'm': 'zhou_youx',
},
success(res) {
let datas = JSON.parse(res.data)
pthis.setData({
goods_video_url: datas.img,
goods_video: datas.data,
ishide: false,
})
wx.hideLoading();
console.log('完成了');
},
fail: function (res) {
wx.showToast({
title: res.smg,
icon: 'none',
duration: 2000,
})
console.log('上传失败');
}
})
},
clearVideo: function (e) {
pthis.setData({
goods_video_url:'',
goods_video:'',
})
}
)}
