修改视频
This commit is contained in:
shidongli
parent
00af5b972d
commit
0bf0f2fac6
@ -720,8 +720,10 @@ export default {
|
||||
}
|
||||
|
||||
video {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
height: 635px;
|
||||
width: 1103px;
|
||||
// height: 500px;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
.viewbody {
|
||||
|
||||
@ -130,8 +130,6 @@ import { VueCropper } from 'vue-cropper'
|
||||
import {
|
||||
uploadFilefm,
|
||||
} from "@/api/system/stationAvatar.js";
|
||||
import _ from 'lodash'
|
||||
import { faL } from '@fortawesome/free-solid-svg-icons';
|
||||
export default {
|
||||
name: 'CropperImage',
|
||||
components: {
|
||||
@ -186,11 +184,8 @@ export default {
|
||||
img: {
|
||||
deep: true, //开启深度监听
|
||||
immediate: true,//开启立即监听
|
||||
|
||||
handler(newimg, oldimg) {
|
||||
|
||||
this.newfile = newimg
|
||||
console.log(newimg, '8888888888888')
|
||||
if (this.img == null) {
|
||||
this.option.img = null;
|
||||
} else if (this.img == "") {
|
||||
@ -211,21 +206,15 @@ export default {
|
||||
},
|
||||
imgnew: {
|
||||
handler(newimg, oldimg) {
|
||||
console.log(newimg, 'newimg')
|
||||
if (newimg) {
|
||||
this.image = process.env.VUE_APP_BASE_API + newimg;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// this.types = this.type;
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.types = this.type;
|
||||
console.log(this.titles, 'this.titles')
|
||||
if (this.titles == '添加素材信息') {
|
||||
console.log(this.titles, 'this.titles')
|
||||
this.uploadbtn = true
|
||||
@ -233,9 +222,6 @@ export default {
|
||||
console.log(this.titles, '修改.titles')
|
||||
this.uploadbtn = false
|
||||
}
|
||||
|
||||
|
||||
// this.getCropperWidth()
|
||||
},
|
||||
methods: {
|
||||
// 打开弹出层结束时的回调
|
||||
@ -363,8 +349,6 @@ export default {
|
||||
}, 1500);
|
||||
|
||||
} else {
|
||||
|
||||
|
||||
let formDatanew = new FormData();
|
||||
// 裁剪之后的
|
||||
formDatanew.append('file', blob)
|
||||
@ -386,9 +370,6 @@ export default {
|
||||
this.files.name = null
|
||||
// return
|
||||
if (this.newfile && !this.files.name) {
|
||||
console.log(this.newfile, 'this.newfile')
|
||||
console.log(this.files, 'this.files66666')
|
||||
|
||||
let formDatanew = new FormData();
|
||||
// 裁剪之后的
|
||||
formDatanew.append('file', blob)
|
||||
@ -405,9 +386,6 @@ export default {
|
||||
}else{
|
||||
this.$emit("imgUrlvido", response.imgUrl);
|
||||
}
|
||||
|
||||
// this.$emit("imgUrl", this.image);
|
||||
|
||||
this.openimg = false;
|
||||
} else {
|
||||
// setTimeout(e => {
|
||||
|
||||
@ -1,38 +1,95 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="user-info-head" :class="video.VideoPath ? 'wihi' : ''" @click="editCropper()">
|
||||
<video style="width: 208px; height: 208px" v-bind:src="video.VideoPath" v-if="video.VideoPath"
|
||||
class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video>
|
||||
<i class="el-icon-plus avatar-uploader-icon" style="
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
"></i>
|
||||
<div
|
||||
class="user-info-head"
|
||||
:class="video.VideoPath ? 'wihi' : ''"
|
||||
@click="editCropper()"
|
||||
>
|
||||
<video
|
||||
style="width: 400px; height: 232px"
|
||||
v-bind:src="video.VideoPath"
|
||||
v-if="video.VideoPath"
|
||||
title="点击上传视频"
|
||||
class="avatar video-avatar"
|
||||
controls="controls"
|
||||
>
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
<i
|
||||
class="el-icon-plus avatar-uploader-icon"
|
||||
v-if="!video.VideoPath"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
"
|
||||
></i>
|
||||
</div>
|
||||
<el-dialog :title="title" :visible.sync="openimg" width="950px" append-to-body @opened="modalOpened"
|
||||
@close="closeDialog">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="openimg"
|
||||
width="1200px"
|
||||
append-to-body
|
||||
@opened="modalOpened"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :xs="24" :md="24" :style="{ height: '350px' }">
|
||||
<el-col :xs="24" :md="24" :style="{ height: '600px' }">
|
||||
<div class="avatar-upload-preview">
|
||||
<video v-if="openimg" style="width: 100%; height: 100%" v-bind:src="videoForm.showVideoPath"
|
||||
class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video>
|
||||
<video
|
||||
v-if="openimg"
|
||||
style="width: 100%; height: 100%"
|
||||
v-bind:src="videoForm.showVideoPath"
|
||||
class="avatar video-avatar"
|
||||
controls="controls"
|
||||
>
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br />
|
||||
<el-progress v-if="progressFlag" :percentage="loadProgress" style="height:30px;padding-bottom:20px"></el-progress>
|
||||
<el-row style="padding-bottom:0px">
|
||||
<el-progress
|
||||
v-if="progressFlag"
|
||||
:percentage="loadProgress"
|
||||
style="height: 30px; padding-bottom: 20px"
|
||||
></el-progress>
|
||||
<el-row style="padding-bottom: 0px">
|
||||
<el-col :lg="3" :md="2">
|
||||
<el-upload :show-file-list="false" class="upload-demo" ref="upload" :action="uploadurl"
|
||||
:on-preview="handlePreview" :auto-upload="false" :on-change="loadJsonFromFile" :data="filedata"
|
||||
:headers="headers" :on-progress="uploadVideoProcess" :on-success="handleAvatarSuccess">
|
||||
<el-button slot="trigger" size="small" type="primary" style="float:left">选取文件</el-button>
|
||||
<el-upload
|
||||
:show-file-list="false"
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
:action="uploadurl"
|
||||
:on-preview="handlePreview"
|
||||
:auto-upload="false"
|
||||
:on-change="loadJsonFromFile"
|
||||
:data="filedata"
|
||||
:headers="headers"
|
||||
:on-progress="uploadVideoProcess"
|
||||
:on-success="handleAvatarSuccess"
|
||||
>
|
||||
<el-button
|
||||
slot="trigger"
|
||||
size="small"
|
||||
type="primary"
|
||||
style="float: left"
|
||||
>选取文件</el-button
|
||||
>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 2, offset: 18 }" :md="2">
|
||||
<el-button v-if="uploadbtn" type="primary" size="small" @click="submitUpload">提 交</el-button>
|
||||
<el-button v-else :loading="!uploadbtn" type="primary" size="small">提交中...</el-button>
|
||||
<el-button
|
||||
v-if="uploadbtn"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submitUpload"
|
||||
>提 交</el-button
|
||||
>
|
||||
<el-button v-else :loading="!uploadbtn" type="primary" size="small"
|
||||
>提交中...</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
@ -252,8 +309,8 @@ export default {
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
width: 960px;
|
||||
height: 540px;
|
||||
border-radius: 0%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
@ -267,23 +324,23 @@ export default {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.user-info-head:hover:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
color: #eee;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
cursor: pointer;
|
||||
line-height: 110px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
// .user-info-head:hover:after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// color: #eee;
|
||||
// background: rgba(0, 0, 0, 0.5);
|
||||
// font-size: 24px;
|
||||
// font-style: normal;
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// -moz-osx-font-smoothing: grayscale;
|
||||
// cursor: pointer;
|
||||
// line-height: 110px;
|
||||
// border-radius: 50%;
|
||||
// }
|
||||
|
||||
.wihi {
|
||||
background-color: #fff;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user