<view >
<view class="uploadv" v-if="form.mp4List.length == 1">
<view class="u-delete-icon" @click="deletemp4">
<u-icon class="u-icon" name="close" size="20" color="#ffffff"></u-icon>
</view>
<view class="img">
<image src="../../static/img/mp4.png"></image>
</view>
</view>
<view class="uploadv" @click="uploadMp4" v-if="form.mp4List.length == 0">
<u-icon name="plus" class="u-add-btn" size="40"></u-icon>
<view class="u-add-tips">选择视频</view>
</view>
<view />
css
.uploadv {
width: 208upx;
height: 208upx;
flex-direction: column;
color: #606266;
font-size: 13px;
overflow: hidden;
margin: 5px;
background: #f4f5f6;
position: relative;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
.u-add-tips {
margin-top: 20upx;
line-height: 20upx;
}
.img {
width: 60%;
height: 60%;
image {
width: 100%;
height: 100%;
}
}
.u-delete-icon {
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
background-color: #FFAD26 !important;
border-radius: 52px;
width: 22px;
height: 22px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
js
uploadMp4() {
let _this = this;
uni.chooseVideo({
sourceType: ['camera', 'album'],
success: function (res) {
console.log(res)
// self.src = res.tempFilePath;
if( res.size >= 5242880 ) {
uni.showToast({
title: '不能超过50M',
icon: 'none',
mask: true,
});
return
}
uni.showLoading({
title: '视频上传中'
});
uni.uploadFile({
url: `${_this.baseUrl}/api/upload`,
filePath: res.tempFilePath,
name: 'file',
method: 'POST',
header: {
'token': uni.getStorageSync('zuserInfo').token
},
success: (uploadFileRes) => {
let ures = JSON.parse(uploadFileRes.data);
_this.form.mp4List = [];
_this.form.mp4List.push(ures.data);
uni.hideLoading();
console.log(_this.form.mp4List);
},
fail: (uploadFileRes) => {
uni.hideLoading();
// console.log(ures.data);
}
});
}
});
},
// 删除视频
deletemp4() {
this.delIds.push(this.form.mp4List[0].fileId);
this.form.mp4List = [];
},
