From 9057e04efad1b7d61c77a72e5c37a504d0aee935 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期五, 26 九月 2025 09:24:03 +0800
Subject: [PATCH] H5静态化
---
admin/src/components/common/UploadFileCommon.vue | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 150 insertions(+), 0 deletions(-)
diff --git a/admin/src/components/common/UploadFileCommon.vue b/admin/src/components/common/UploadFileCommon.vue
new file mode 100644
index 0000000..8ad4306
--- /dev/null
+++ b/admin/src/components/common/UploadFileCommon.vue
@@ -0,0 +1,150 @@
+<template>
+ <div>
+ <el-upload
+ class="avatar-uploader"
+ :accept="uploadData.fileTyp"
+ :style="customStyle"
+ :action="uploadImgUrl"
+ :file="file1"
+ :data="uploadData"
+ :limit="1"
+ :show-file-list="false"
+ :on-success="handleSuccess"
+ :on-error="uploadError"
+ :before-upload="beforeAvatarUpload">
+ <img v-if="file.fileType==0 && file.fileUrlFull" :src="file.fileUrlFull" style="width: 90px;height: 90px" class="avatar">
+ <video v-if="file.fileType==1 &&file.fileUrlFull" :src="file.fileUrlFull" style="width: 90px;height: 90px" class="avatar" />
+ <span v-if="file.fileType==2 &&file.fileUrlFull" style="width: 90px;height: 90px" class="avatar" >{{file.fileName}}</span>
+ <div class="desc_data_list_item_img" style="cursor: pointer; background: #8c939d;">
+ <i class="el-icon-plus"></i>
+ </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: {
+ // 涓婁紶鍥剧墖
+ handleSuccess(res, file) {
+ if (res.code == 200) {
+ let { data } = res
+ this.file.fileUrl = data.imgaddr
+ this.file.fileType = data.type
+ this.file.fileName= data.originname
+ this.file.fileUrlFull = data.url
+ this.$message.success('涓婁紶鎴愬姛')
+ this.$emit('uploadSuccess', { fileurl: data.imgaddr, fileUrlFull: data.url, name: data.originname })
+ } else {
+ this.$message.error('涓婁紶澶辫触')
+ }
+ this.$emit('uploadEnd')
+ },
+ uploadError() {
+ this.$message.error('涓婁紶澶辫触')
+ this.$emit('uploadEnd')
+ },
+ // // 鎷︽埅
+ beforeAvatarUpload(file) {
+ this.$emit('uploadBegin')
+ return true
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.desc_data_list_item_img {
+ flex-shrink: 0;
+ width: 80px;
+ height: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ .el-icon-plus {
+ font-size: 26px;
+ color: #ffffff;
+ }
+ img {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+$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