You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
3.3 KiB
152 lines
3.3 KiB
<template>
|
|
<view>
|
|
<view class="iu b-relative">
|
|
<view v-if="!url" @click="selectImage()">
|
|
<view class="ii" :style="{'height': height+'rpx'}" v-if="!url && files.length<1"></view>
|
|
<view class="ic">
|
|
<image style="width: 110rpx; height: 110rpx;" src="/static/re/ico.png" />
|
|
</view>
|
|
<view class="im" :style="{'height': height+'rpx'}" v-if="!url && files.length>0">
|
|
<video :style="{'height': height+'rpx'}" :src="files[0].tempFilePath"
|
|
mode="scaleToFill" class="im" />
|
|
</view>
|
|
</view>
|
|
<view v-if="url" class="is" :style="{'height': 'auto'}" >
|
|
<video :style="{'height': 'auto'}" :src="url"
|
|
mode="widthFix" class="is" />
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
height: {
|
|
type: Number,
|
|
required: false,
|
|
default: 342
|
|
},
|
|
module: {
|
|
type: String,
|
|
required: false,
|
|
default: "upload"
|
|
},
|
|
url: {
|
|
type: String,
|
|
required: false,
|
|
default: ""
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
files: [],
|
|
paths: [],
|
|
value: [],
|
|
progress: 1,
|
|
udata: {}
|
|
}
|
|
},
|
|
methods: {
|
|
selectImage(){
|
|
const _this = this
|
|
uni.chooseMedia({
|
|
count: 1,
|
|
maxDuration: 300,
|
|
mediaType: ["video"],
|
|
success: (res) => {
|
|
_this.files = res.tempFiles
|
|
_this.paths = res.tempFiles[0].tempFilePath
|
|
this.$httpGet("/oss/get", {}, (us) => {
|
|
console.log('get', us);
|
|
console.log('file', res);
|
|
_this.udata = us.data
|
|
_this.doUpload(_this.paths)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
doUpload(filePath){
|
|
const key = `${this.module}/${new Date().getTime()}.mp4`;
|
|
uni.uploadFile({
|
|
url: this.udata.host,
|
|
filePath,
|
|
name: 'file',
|
|
formData: {
|
|
key,
|
|
policy: this.udata.policy, //后台获取超时时间
|
|
OSSAccessKeyId: this.udata.accessKeyId, //后台获取临时ID
|
|
signature: this.udata.signature, //后台获取签名
|
|
success_action_status: '200' //让服务端返回200,不然，默认会返回204
|
|
},
|
|
success: (res) => {
|
|
console.log('oss', this.udata.host+"/"+key)
|
|
//const cover = video + ' // + ',w_' + this.width +',h_' + this.height + '
|
|
this.$emit('success', this.udata.host+"/"+key)
|
|
//uni.showToast({
|
|
// icon:'none', title:this.udata.host+"/"+key+'?x-oss-process=video/snapshot,t_10,m_fast'
|
|
//})
|
|
},
|
|
fail: (err) => {
|
|
uni.showToast({
|
|
icon:'none', title: '视频存储失败'
|
|
})
|
|
console.log('oss', err)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.iu{
|
|
width: 626rpx;
|
|
min-height: 342rpx;
|
|
height: auto;
|
|
border-radius: 16px;
|
|
margin: 15rpx auto;
|
|
}
|
|
|
|
.iu:active{
|
|
transform: translateY(2rpx);
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.4);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.ii{
|
|
width: 626rpx;
|
|
height: 342rpx;
|
|
border-radius: 16rpx;
|
|
filter: blur(3rpx);
|
|
opacity: 0.89;
|
|
background: rgba(41, 41, 41, 0.4);
|
|
border: 1rpx dashed #ccc;
|
|
}
|
|
.ii:active{
|
|
transform: translateY(2rpx);
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
.im{
|
|
width: 626rpx;
|
|
height: 342rpx;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
.is{
|
|
width: 626rpx;
|
|
height: 342rpx;
|
|
border-radius: 4rpx !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ic{
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
position: absolute;
|
|
top: calc(50% - 55rpx);
|
|
left: calc(50% - 55rpx);
|
|
}
|
|
</style>
|