| 学习内容 |
主要完成了视频发布页面的展示代码
<template>
<view style="height: 700px;" >
<view class="blank"></view>
<cu-custom bgColor="bg-black" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">视频上传</block>
</cu-custom>
<view>
<textarea placeholder="添加作品描述" v-model="information.description">
</textarea>
</view>
<view class="flex-wrap">
<view class="ver-mid">
<text>
请选择视频的封面
</text>
</view>
<view class="selected_img" v-if="imagesrc">
<view class="uploader_img">
<image class="vid" :src="imagesrc" controls="false"></image>
<view class="icon_delete_img" @tap="delectImage">×</view>
</view>
</view>
<view class="select_viedo_border">
<image class="select_pic" @tap="selectCover" src="../../static/img/sel.png"></image>
</view>
</view>
<view class="flex-wrap">
<view class="ver-mid">
<text >
请选择要上传的视频
</text>
</view>
<view class="selected_viedo" v-if="videosrc">
<view class="uploader_video">
<video class="vid" :src="videosrc" controls="false"></video>
<view class="icon_delete_video" @tap="delectVideo">×</view>
</view>
</view>
<view class="select_viedo_border">
<image class="select_pic" @tap="selectVideo" src="../../static/img/sel.png"></image>
</view>
</view>
<button @click="uploadmes" size="default">上传</button>
</view>
</template>
<script>
export default {
data() {
return {
imagesrc: '',//本地图片的地址
videosrc:'',//本地视频的地址
information:{
userid:'1',//用户的id
description:'',//视频的描述信息
cover_url:'',//视频封面url
video_url: '',//视频的url
}
}
},
methods: {
selectCover:function(){
var self=this;
uni.chooseImage({
count:1,
sizeType: ['original', 'compressed'],
success:function(res){
self.imagesrc=res.tempFilePaths[0];
uni.uploadFile({
url: 'http://192.168.179.215:8085/upload', //上传地址
name: 'file',
filePath:self.imagesrc,
success:function(uploadRes){
console.log(uploadRes);
self.information.cover_url=uploadRes.data;
uni.showToast({
title: '上传成功'
});
},
fail:function(error){
console.log(error);
uni.showToast({
title: '上传失败'
});
},
});
}
});
},
selectVideo: function() {
var self = this;
uni.chooseVideo({
sourceType: ['album'],
success: function(res) {
self.videosrc = res.tempFilePath;
uni.uploadFile({
url: 'http://192.168.179.215:8085/upload', //上传地址
name: 'file',
filePath: self.videosrc,
success: function(uploadRes) {
console.log(uploadRes);
self.information.video_url=uploadRes.data;
uni.showToast({
title: '上传成功'
});
},
fail: function(error) {
// 上传失败处理逻辑
console.log(error);
uni.showToast({
title: '上传失败'
});
},
});
},
});
},
delectVideo: function() {
uni.showModal({
title:"提示",
content:"是否要删除此视频",
success:(res) =>{
if(res.confirm){
this.videosrc = '';
this.information.video_url=''
}
}
})
},
delectImage: function() {
uni.showModal({
title:"提示",
content:"是否要删除此封面图片",
success:(res) =>{
if(res.confirm){
this.imagesrc = '';
this.information.cover_url=''
}
}
})
},
uploadmes:function()
{
console.log(this.information);
if(this.information.video_url==='')
{
uni.showToast({
title:"视频不能为空",
icon:'error',
});
return;
}
if(this.information.cover_url==='')
{
uni.showToast({
title:"封面不能为空",
icon:'error',
});
return;
}
if(this.information.description==='')
{
uni.showToast({
title:"视频描述不能为空",
icon:'error',
});
return;
}
uni.request({
method:"POST",
url:'http://192.168.179.215:8085/mesupload',
data:this.information,
success: (res) => {
console.log(res.data);
uni.showToast({
title:"视频上传成功",
});
uni.switchTab({
url:"/pages/index/index"
})
},
fail() {
uni.showToast({
title:"视频上传失败",
icon:'error',
});
}
})
}
},
}
</script>
<style lang="scss">
.flex-wrap{
margin: 5px;
display: flex;
flex-wrap: wrap;
}
.selected_viedo
{
width: 100px;
height: 100px;
position: relative;
}
.uploader_video{
margin-left: 5px;
width: 100px;
height: 100px;
}
.icon_delete_video{
position:absolute;
top: 1px;
right: 1px;
background-color: #888;
color: #fff;
border-radius: 50%;
width: 10px;
height: 10px;
font-size: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.selected_img
{
width: 100px;
height: 100px;
position: relative;
}
.uploader_img{
margin-left: 5px;
width: 100px;
height: 100px;
}
.icon_delete_img{
position:absolute;
top: 5px;
right: 5px;
background-color: #888;
color: #fff;
border-radius: 50%;
width: 10px;
height: 10px;
font-size: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.vid {
margin-left: 6px;
margin-top: 6px;
width: 88px;
height: 88px;
border-radius: 10%;
}
.select_viedo_border{
margin-left: 5px;
height: 100px;
width: 100px;
border:2px solid #000000;
border-radius: 10px;
}
.select_pic{
height: 80px;
width: 80px;
opacity: 0.6;
display: block;
margin: 0 auto;
margin-top: 10px;
}
.ver-mid{
height: 100px;
width: 100px;
font-size: 20px;
text-align: center;
line-height: 30px;
margin-top: 20px;
}
textarea{
margin-left: 5px;
width: 360px;
height: 170px;
border-radius: 10px;
border: 1px solid #000000;
}
textarea:-ms-input-placeholder{
color: #000000;
}
.blank{
height: 20px;
opacity: 1;
}
button{
height: 50px;
width: 180px;
border-radius: 10px;
text-align:center;
border: 1px solid #000000;
}
</style>
|