wxml文件代码
<view class="publish_div">
<view class="bottom_div">
<view class="title"><span class="reds">*</span>素材视频</view>
<ul class="goods-img-list flex-def flex-wrap">
<li wx:if="{{video!=''}}" class="video_li flex-def flex-cCenter flex-zCenter">
<view class="del_img flex-def flex-cCenter flex-zCenter"><image src="./static/images/icon_bofang.png"
style="height: 70rpx;width: 70rpx;" alt=""/></view>
<image src="{{video_img}}"
alt="" class="video_img"/>
<view class="del_video" bindtap="del_video()">删除</view>
</li>
<li class="list-one" wx:else>
<view class="upload-img">
<view class="main flex-def flex-cCenter flex-zCenter" bindtap="chooseVideo">
<view class="upload-ys flex-def flex-cCenter flex-zCenter">
<view class="tu"><image src="./static/images/icon_up_s.png" alt=""/></view>
</view>
</view>
</view>
</li>
</ul>
</view>
</view>
wxss文件代码
.publish_top .goods-img-list>li {
width: 200rpx;
height: 200rpx;
position: relative;
font-size: 0;
border-radius: 24rpx;
margin-bottom: 30rpx;
margin-right: 20rpx;
}
.publish_top .goods-img-list>li:nth-child(9) {
margin-right: 0;
}
.publish_top .goods-img-list>li>image {
height: 100px;
width: 100%;
border-radius: 24rpx;
}
.publish_top .goods-img-list .upload-img .main {
width: 100%;
height: 200rpx;
position: relative;
border-radius: 24rpx;
}
.publish_top .goods-img-list .upload-img input[type=file] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 95;
opacity: 0;
}
.publish_top .goods-img-list .upload-img .upload-ys {
width: 100%;
height: 100%;
color: #999;
border-radius: 24rpx;
background: #F7F7F8;
}
.publish_top .goods-img-list .upload-img .upload-ys .tu {
display: inline-block;
width: 60rpx;
height: 60rpx;
}
.publish_top .goods-img-list .upload-img .upload-ys .tu>image{
width: 100%;
height: 100%;
display: block;
}
.publish_top .goods-img-list .upload-img .upload-ys p {
font-size: 18rpx;
color: #c5c5c5;
line-height: 1;
}
.publish_top .goods-img-list .del {
position: absolute;
width: 40rpx;
height: 40rpx;
top: -14rpx;
right: -14rpx;
border-radius: 50%;
z-index: 100;
}
.publish_div .title {
font-size: 32rpx;
color: #333;
margin-right:30rpx;
height: 106rpx;
line-height: 106rpx;
}
js文件
data: {
video: '',//视频
video_img: '',
},
// 选择视频
chooseVideo: function () {
var _this = this
wx.chooseVideo({
success: function (res) {
console.log(res)
console.log('视频路径', res.tempFilePath)
// 将数据转成文件流
wx.getFileSystemManager().readFile({
filePath: res.tempFilePath,
success: function (res1) {
console.log('文件流数据:', res1.data);
_this.upVideo(res.tempFilePath, res1.data)
},
fail: function (error) {
wx.showToast({
title: '上传失败',
icon: 'none'
})
console.log('上传失败', error)
}
});
},
fail: function (res) {
wx.showModal({
title: '提示',
content: "请上传正确的文件格式",
})
}
})
},
// 上传视频
upVideo: function (tempFilePath, video) {
//tempFilePath 视频路径
//video 文件流数据
var _this = this;
wx.showLoading({
title: '上传视频中...',
})
wx.uploadFile({
url: '', //接口
filePath: tempFilePath,//视频路径
name: 'file',
formData: {
type: 2,
video: video//后端接口需要的文件流参数
},
success: function (res) {
wx.hideLoading()
if (res.statusCode === 200) {
var data = JSON.parse(res.data)
if (data.errcode == 0) {
_this.setData({
video: data.data.url,
video_img: data.data.video_img
})
} else {
wx.showToast({
title: data.errmsg,
icon: 'none'
})
}
}
},
fail: function (error) {
console.log(error);
wx.hideLoading()
}
})
},
// 删除视频
del_video: function () {
var that = this;
that.setData({
video: ''
})
},
ps:因公司后端必须要上传文件流数据,所以只能转成文件流形式