微信小程序-图片上传chooseImage 预览图片previewImage，视频上传chooseVideo，显示隐藏

首先，看一下效果。

ps: 显示视频按钮控制是否显示视频，未选择图片的情况下，是不显示图片占据空间，就是为隐藏。

Wxml：

Wxss:
/上传图片多行变一行显示/
.img_style{
flex-direction: row;
display: flex;
}
/上传块大小/
.img_bg{
width: 240rpx;
height: 240rpx;
}
/上传图片/
.up_pictures{
width: 200rpx;
height: 200rpx;
margin: 30rpx 30rpx auto 30rpx;
}
/上传按钮/
.button_bg{
flex-direction: row;
display: flex;
}
button{
width: 30%;
margin-top: 10rpx;
margin-bottom: 10rpx;}
/上传视频/
.video{
width: 90%;
height: 240rpx;
margin-left: 5%;
margin-right: 5%;
}
/视频框隐藏/
.hide{
display: none;
}
/视频框显示/
.show{
display: block;
}

Js:
Page({
data:{
imgs: [], //选择图片
video: [], //选择视频
showView: false,
},

//图片上传
bindImgUp: function (e){
var _this = this;
wx.chooseImage({ //从本地相册选择图片或使用相机拍照
count: 3, //最多选择多少张图片 默认为9
sizeType: [‘original’, ‘compressed’], //所选照片的尺寸 original为原图compressed为缩略图
sourceType: [‘album’], //album为从手机中选择 camera为相机
success: function(res) {
var tempFilePaths = res.tempFilePaths;
_this.setData({
imgs: res.tempFilePaths
});
console.log(tempFilePaths)
},
})
},

//预览图片
previewImg: function (e) {
var current = e.target.dataset.src;
wx.previewImage({ //在新页面中全屏预览图片 预览的过程中用户可以进行保存图片、发送给朋友等操作
current: ‘current’, //当前显示图片的链接 默认为第一张
urls: this.data.imgs, //需要预览的图片链接列表
success: function (e) {
console.log(‘预览成功’)
}
})
},

//视频上传
bindVideoUp: function (e){
var _this = this;
wx.chooseVideo({ //拍摄视频或从手机相册中选视频 sourcpe[‘album’], //album为手机本地选择视频 camera为录像
compressed: true, //是否压缩所选择的视频文件 maxDuration: 60, //拍摄视频最长拍摄时间，单位秒 默认60秒
success(res) {
console.log(res.tempFilePath)
_this.setData({
video: res.tempFilePath,
})
}
})
},

//加载时隐藏视频组件，如果想显示把"false"改成true，data里的showView也要修改为true
onLoad: function (options) {
showView: (options.showView == “false” ? true : false)
},

//显示隐藏视频
onChangeShowState: function () {
var that = this;
that.setData({
showView: (!that.data.showView)
})
},
})