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/UploadFile.vue | 123 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 123 insertions(+), 0 deletions(-)
diff --git a/admin/src/components/common/UploadFile.vue b/admin/src/components/common/UploadFile.vue
new file mode 100644
index 0000000..888a670
--- /dev/null
+++ b/admin/src/components/common/UploadFile.vue
@@ -0,0 +1,123 @@
+<template>
+ <div>
+ <el-upload
+ class="upload-demo"
+ :accept="uploadData.fileTyp"
+ :action="uploadImgUrl"
+ :limit="1"
+ :on-exceed="handleExceed"
+ :on-success="handleFileSuccess"
+ :on-error="uploadError"
+ :before-upload="beforeFileUpload"
+ :file-list="fileList">
+ <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
+ <div slot="tip" class="el-upload__tip">鍙兘涓婁紶{{ uploadData.fileType }}鏂囦欢锛屼笖涓嶈秴杩�5mb</div>
+ </el-upload>
+ </div>
+
+</template>
+
+<script>
+export default {
+ props: {
+ file: {
+ type: Object,
+ default: () => {}
+ },
+ tipsLabel: '',
+ customStyle: {
+ type: String,
+ default: 'width: 190px; height: 190px;'
+ },
+ uploadData: Object
+ },
+ data() {
+ return {
+ fileList:null,
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/public/upload?folder='+this.uploadData.folder
+ }
+ },
+
+ methods: {
+ // 涓婁紶鍥剧墖
+ handleExceed(){},
+ handleFileSuccess(res, file) {
+ if (res.code == 200) {
+ let { data } = res
+ // this.fileList = [{name: data.originname, url: 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')
+ },
+ // // 鎷︽埅
+ beforeFileUpload(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: 80% !important;
+ height: 50px !important;
+}
+.icon {
+ -webkit-transform: translate(-50%,-50%);
+ -ms-transform: translate(-50%,-50%);
+ transform: translate(0%, -85%);
+}
+
+</style>
+
--
Gitblit v1.9.3