上传视频组件封装
This commit is contained in:
熊丽君
346
src/components/VideoUpload/index.vue
Normal file
346
src/components/VideoUpload/index.vue
Normal file
@ -0,0 +1,346 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-upload
|
||||||
|
:headers="headers"
|
||||||
|
:action="videoUploadUrl"
|
||||||
|
list-type="picture-card"
|
||||||
|
:on-success="handleSuccess"
|
||||||
|
:on-error="handleUploadError"
|
||||||
|
:before-upload="handleBeforeUpload"
|
||||||
|
:file-list="fileList"
|
||||||
|
:on-progress="handleProgress"
|
||||||
|
:data="data"
|
||||||
|
accept="video/mp4"
|
||||||
|
:class="{ hide: fileList.length >= limit }"
|
||||||
|
>
|
||||||
|
<!-- accept="video/mp4, video/ogg, video/flv,video/avi,video/wmv,video/rmvb" -->
|
||||||
|
<!-- :disabled="fileList.length >= limit || uploadBtn" -->
|
||||||
|
<template #default>
|
||||||
|
<i class="el-icon-plus"></i>
|
||||||
|
</template>
|
||||||
|
<template #file="{ file }">
|
||||||
|
<div style="height: 100%">
|
||||||
|
<video
|
||||||
|
class="el-upload-list__item-thumbnail"
|
||||||
|
:src="file.url"
|
||||||
|
alt=""
|
||||||
|
></video>
|
||||||
|
<span class="el-upload-list__item-actions">
|
||||||
|
<span
|
||||||
|
class="el-upload-list__item-preview"
|
||||||
|
@click="handleShowVideo(file)"
|
||||||
|
>
|
||||||
|
<i class="el-icon-video-play"></i>
|
||||||
|
</span>
|
||||||
|
<!-- <span
|
||||||
|
class="el-upload-list__item-edit"
|
||||||
|
@click="handleEditVideo(file)"
|
||||||
|
>
|
||||||
|
<el-icon><Edit /></el-icon>
|
||||||
|
</span> -->
|
||||||
|
<span
|
||||||
|
class="el-upload-list__item-delete"
|
||||||
|
@click="handleRemove(file)"
|
||||||
|
>
|
||||||
|
<i class="el-icon-delete"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<el-progress
|
||||||
|
type="circle"
|
||||||
|
class="progressModule"
|
||||||
|
:color="colors"
|
||||||
|
:percentage="Number(uploadPercentage)"
|
||||||
|
v-if="showProgress && file.url == uploadUrl"
|
||||||
|
></el-progress>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
<!-- 上传提示 -->
|
||||||
|
<div class="el-upload__tip" v-if="showTip">
|
||||||
|
请上传
|
||||||
|
<template v-if="fileSize">
|
||||||
|
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
||||||
|
</template>
|
||||||
|
<template v-if="fileType">
|
||||||
|
格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
|
||||||
|
</template>
|
||||||
|
的文件
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
title="预览"
|
||||||
|
append-to-body
|
||||||
|
width="40%"
|
||||||
|
>
|
||||||
|
<video
|
||||||
|
:src="dialogVideoUrl"
|
||||||
|
alt=""
|
||||||
|
autoplay
|
||||||
|
class="video"
|
||||||
|
controls="controls"
|
||||||
|
></video>
|
||||||
|
</el-dialog>
|
||||||
|
<!-- <el-dialog v-model="editView" width="40%" append-to-body>
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="4"
|
||||||
|
v-model="editForm.url"
|
||||||
|
@input="editVideo"
|
||||||
|
></el-input>
|
||||||
|
</el-dialog> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getToken } from "@/utils/auth";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: [String, Object, Array],
|
||||||
|
// 数量限制
|
||||||
|
limit: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
// 大小限制(MB)
|
||||||
|
fileSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 5,
|
||||||
|
},
|
||||||
|
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||||
|
fileType: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ["doc", "xls", "ppt", "txt", "pdf"],
|
||||||
|
},
|
||||||
|
// 是否显示提示
|
||||||
|
isShowTip: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
showTip() {
|
||||||
|
return this.isShowTip && (this.fileType || this.fileSize);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(val) {
|
||||||
|
if (val) {
|
||||||
|
// 首先将值转为数组
|
||||||
|
const list = Array.isArray(val) ? val : this.value.split(",");
|
||||||
|
// 然后将数组转为对象数组
|
||||||
|
this.fileList = list.map((item) => {
|
||||||
|
if (typeof item === "string") {
|
||||||
|
item = { name: item, url: item };
|
||||||
|
// if (item.indexOf(this.baseUrl) === -1) {
|
||||||
|
// item = { name: this.baseUrl + item, url: this.baseUrl + item };
|
||||||
|
// } else {
|
||||||
|
// item = { name: item, url: item };
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.fileList = [];
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 设置上传的请求头部
|
||||||
|
headers: { "x-token": getToken() },
|
||||||
|
baseUrl: process.env.VUE_APP_BASE_API,
|
||||||
|
videoUploadUrl: process.env.VUE_APP_BASE_API + "/admin/v1/upload",
|
||||||
|
dialogVideoUrl: "",
|
||||||
|
dialogVisible: false,
|
||||||
|
fileList: [],
|
||||||
|
editForm: {
|
||||||
|
url: "",
|
||||||
|
uid: null,
|
||||||
|
},
|
||||||
|
editView: false,
|
||||||
|
uploadPercentage: 0,
|
||||||
|
showProgress: false,
|
||||||
|
uploadUrl: "",
|
||||||
|
colors: [
|
||||||
|
{ color: "#ADD8E6", percentage: 20 },
|
||||||
|
{ color: "#87CEEB", percentage: 40 },
|
||||||
|
{ color: "#87CEFA", percentage: 60 },
|
||||||
|
{ color: "#00BFFF", percentage: 80 },
|
||||||
|
{ color: "#1296DB", percentage: 100 },
|
||||||
|
],
|
||||||
|
uploadBtn: false,
|
||||||
|
loading: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 移除视频
|
||||||
|
handleRemove(file) {
|
||||||
|
const findex = this.fileList.map((f) => f.url).indexOf(file.url);
|
||||||
|
if (findex > -1) {
|
||||||
|
this.fileList.splice(findex, 1);
|
||||||
|
this.submitFile();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleShowVideo(file) {
|
||||||
|
this.dialogVideoUrl = file.url;
|
||||||
|
this.dialogVisible = true;
|
||||||
|
},
|
||||||
|
handleBeforeUpload(file) {
|
||||||
|
if (this.fileType.length) {
|
||||||
|
let fileExtension = "";
|
||||||
|
if (file.name.lastIndexOf(".") > -1) {
|
||||||
|
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||||||
|
}
|
||||||
|
const isTypeOk = this.fileType.some((type) => {
|
||||||
|
if (file.type.indexOf(type) > -1) return true;
|
||||||
|
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
if (!isTypeOk) {
|
||||||
|
this.$message.error(
|
||||||
|
`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 校检文件大小
|
||||||
|
if (this.fileSize) {
|
||||||
|
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||||
|
if (!isLt) {
|
||||||
|
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.loading = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: "上传中",
|
||||||
|
background: "rgba(0, 0, 0, 0.7)",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleUploadError() {
|
||||||
|
if (this.loading) {
|
||||||
|
this.loading.close();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 上传完成
|
||||||
|
handleSuccess(response, file, fileList) {
|
||||||
|
this.showProgress = false;
|
||||||
|
this.uploadBtn = false;
|
||||||
|
if (response.code != "200") {
|
||||||
|
for (var i = 0; i < fileList.length; i++) {
|
||||||
|
if (i + 1 == fileList.length) {
|
||||||
|
fileList.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$message.error(response.message);
|
||||||
|
this.loading.close();
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.$message.success(response.message);
|
||||||
|
let obj = {
|
||||||
|
name: response.data.filename,
|
||||||
|
status: "success",
|
||||||
|
uid: file.uid,
|
||||||
|
url: response.data.url,
|
||||||
|
};
|
||||||
|
this.fileList.push(obj);
|
||||||
|
this.loading.close();
|
||||||
|
this.submitFile();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 播放视频
|
||||||
|
handleEditVideo(file) {
|
||||||
|
this.editForm.url = file.url;
|
||||||
|
this.editForm.uid = file.uid;
|
||||||
|
this.editView = true;
|
||||||
|
},
|
||||||
|
// 编辑视频
|
||||||
|
editVideo() {
|
||||||
|
for (let i in this.fileList) {
|
||||||
|
if (this.fileList[i].uid == this.editForm.uid) {
|
||||||
|
this.fileList[i].url = this.editForm.url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.submitFile();
|
||||||
|
},
|
||||||
|
submitFile() {
|
||||||
|
// this.$emit("submitImg", this.fileList);
|
||||||
|
this.$emit("input", this.listToString(this.fileList));
|
||||||
|
},
|
||||||
|
// 对象转成指定字符串分隔
|
||||||
|
listToString(list, separator) {
|
||||||
|
let strs = "";
|
||||||
|
separator = separator || ",";
|
||||||
|
for (let i in list) {
|
||||||
|
strs += list[i].url.replace(this.baseUrl, "") + separator;
|
||||||
|
}
|
||||||
|
return strs != "" ? strs.substr(0, strs.length - 1) : "";
|
||||||
|
},
|
||||||
|
// 上传进度
|
||||||
|
handleProgress(response, file, fileList) {
|
||||||
|
this.uploadBtn = true;
|
||||||
|
this.uploadUrl = file.url;
|
||||||
|
this.showProgress = true;
|
||||||
|
this.uploadPercentage = file.percentage.toFixed(0);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.el-icon-plus {
|
||||||
|
font-size: 30px !important;
|
||||||
|
}
|
||||||
|
.el-icon-edit {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
.el-icon-video-play {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
.el-icon-delete {
|
||||||
|
font-size: 18px !important;
|
||||||
|
color: rgb(243, 143, 130);
|
||||||
|
}
|
||||||
|
.el-input >>> .el-textarea__inner {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
.video {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
min-height: 200px;
|
||||||
|
max-height: 600px;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.progressModule >>> .el-progress__text {
|
||||||
|
color: #1296db;
|
||||||
|
font-size: 15px !important;
|
||||||
|
}
|
||||||
|
// .el-upload--picture-card 控制加号部分
|
||||||
|
::v-deep.hide .el-upload--picture-card {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
// 去掉动画效果
|
||||||
|
::v-deep .el-list-enter-active,
|
||||||
|
::v-deep .el-list-leave-active {
|
||||||
|
transition: all 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-list-enter,
|
||||||
|
.el-list-leave-active {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -39,6 +39,8 @@ import Editor from '@/components/Editor'
|
|||||||
import FileUpload from '@/components/FileUpload'
|
import FileUpload from '@/components/FileUpload'
|
||||||
// 图片上传组件
|
// 图片上传组件
|
||||||
import ImageUpload from '@/components/ImageUpload'
|
import ImageUpload from '@/components/ImageUpload'
|
||||||
|
// 视频上传组件
|
||||||
|
import VideoUpload from '@/components/VideoUpload'
|
||||||
// 图片预览组件
|
// 图片预览组件
|
||||||
import ImagePreview from '@/components/ImagePreview'
|
import ImagePreview from '@/components/ImagePreview'
|
||||||
// 字典标签组件
|
// 字典标签组件
|
||||||
@ -76,6 +78,7 @@ Vue.component('RightToolbar', RightToolbar)
|
|||||||
Vue.component('Editor', Editor)
|
Vue.component('Editor', Editor)
|
||||||
Vue.component('FileUpload', FileUpload)
|
Vue.component('FileUpload', FileUpload)
|
||||||
Vue.component('ImageUpload', ImageUpload)
|
Vue.component('ImageUpload', ImageUpload)
|
||||||
|
Vue.component('VideoUpload', VideoUpload)
|
||||||
Vue.component('ImagePreview', ImagePreview)
|
Vue.component('ImagePreview', ImagePreview)
|
||||||
Vue.component('SiteOptions', SiteOptions)
|
Vue.component('SiteOptions', SiteOptions)
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user