From c14da121eb41234a0a9016596b07592a564a212b Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 10 七月 2025 08:58:50 +0800
Subject: [PATCH] ss
---
admin/src/components/common/UploadAvatarVideo.vue | 128 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 128 insertions(+), 0 deletions(-)
diff --git a/admin/src/components/common/UploadAvatarVideo.vue b/admin/src/components/common/UploadAvatarVideo.vue
new file mode 100644
index 0000000..1ed4dbd
--- /dev/null
+++ b/admin/src/components/common/UploadAvatarVideo.vue
@@ -0,0 +1,128 @@
+<template>
+ <div>
+ <el-upload
+ class="avatar-uploader"
+ accept=".mp4"
+ :style="customStyle"
+ :action="uploadImgUrl"
+ :data="uploadData"
+ :show-file-list="false"
+ :on-success="handleAvatarSuccess"
+ :on-error="uploadError"
+ :before-upload="beforeAvatarUpload">
+ <video v-if="file.videourlfull" :src="file.videourlfull" :style="customStyle" class="avatar" />
+ <div v-else :style="customStyle">
+ <i class="el-icon-plus avatar-uploader-icon"></i>
+ <div class="tips-style">{{ tipsLabel }}</div>
+ </div>
+ </el-upload>
+ </div>
+
+</template>
+
+<script>
+export default {
+ props: {
+ file: {
+ type: Object,
+ default: () => {}
+ },
+ tipsLabel: '',
+ customStyle: {
+ type: String,
+ default: 'width: 90px; height: 90px;'
+ },
+ uploadData: Object
+ },
+ data() {
+ return {
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/public/upload'
+ }
+ },
+
+ methods: {
+ // 涓婁紶鍥剧墖
+ handleAvatarSuccess(res, file) {
+ if (res.code == 200) {
+ let { data } = res
+ this.file.videourl = data.imgaddr;
+ this.file.videourlfull = data.url;
+ this.$message.success('涓婁紶鎴愬姛')
+ this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url, name: data.originname })
+ } else {
+ this.$message.error('涓婁紶澶辫触')
+ }
+ this.$emit('uploadEnd')
+ },
+ uploadError() {
+ this.$message.apiFailed('涓婁紶澶辫触')
+ this.$emit('uploadEnd')
+ },
+ // // 鎷︽埅
+ beforeAvatarUpload(file) {
+ this.$emit('uploadBegin')
+ return true
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+$image-width: 100px;
+.avatar-uploader {
+ width: $image-width;
+ height: $image-width;
+}
+::v-deep .el-upload {
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
+ width: $image-width;
+ height: $image-width;
+ overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+ border-color: #409EFF;
+}
+.avatar-uploader-icon {
+ line-height: 90px;
+ font-size: 28px;
+ color: #8c939d;
+ width: $image-width;
+ height: $image-width;
+ text-align: center;
+}
+.avatar {
+ width: $image-width;
+ height: $image-width;
+ display: block;
+}
+.tips-style {
+ height: 13px;
+ font-size: 13px;
+ font-weight: 400;
+ color: #999999;
+ line-height: 13px;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep .el-upload--picture-card{
+ width: 90px !important;
+ height: 90px !important;
+}
+::v-deep .el-upload-list__item {
+ width: 90px !important;
+ height: 90px !important;
+}
+.icon {
+ -webkit-transform: translate(-50%,-50%);
+ -ms-transform: translate(-50%,-50%);
+ transform: translate(0%, -85%);
+}
+::v-deep .el-upload-list__item {
+ width: 90px !important;
+ height: 90px !important;
+}
+</style>
+
--
Gitblit v1.9.3