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/UploadImage.vue | 153 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 153 insertions(+), 0 deletions(-)
diff --git a/admin/src/components/common/UploadImage.vue b/admin/src/components/common/UploadImage.vue
new file mode 100644
index 0000000..8ada0f0
--- /dev/null
+++ b/admin/src/components/common/UploadImage.vue
@@ -0,0 +1,153 @@
+<template>
+ <div>
+ <el-upload
+ :action="uploadImgUrl"
+ :data="uploadData"
+ list-type="picture-card"
+ :file-list="fileList"
+ accept=".jpg,.png"
+ :before-upload="beforeUpload"
+ :on-success="uploadSuccess"
+ :on-error="fail"
+ >
+ <i class="el-icon-plus icon"></i>
+ <div slot="file" slot-scope="{file}">
+ <img
+ class="el-upload-list__item-thumbnail"
+ :src="file.url" alt=""
+ style="width: 100px;height: 100px;"
+ >
+ <span class="el-upload-list__item-actions">
+ <span
+ class="el-upload-list__item-preview"
+ @click="handlePictureCardPreview(file)"
+ >
+ <i class="el-icon-zoom-in"></i>
+ </span>
+ <span
+ class="el-upload-list__item-delete"
+ @click="handleRemove(file)"
+ >
+ <i class="el-icon-delete"></i>
+ </span>
+ </span>
+ </div>
+ </el-upload>
+ <el-image-viewer
+ v-if="showViewer"
+ :on-close="closeViewer"
+ :initialIndex="tempIndex"
+ :url-list="srcList"
+ :z-index="3000"
+ />
+ </div>
+
+</template>
+
+<script>
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+export default {
+ components: {
+ ElImageViewer
+ },
+ props: {
+ fileList: {
+ type: Array,
+ default: () => []
+ },
+ uploadData: Object,
+ },
+ data() {
+ return {
+ uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/web/public/uploadLocal',
+ realList: [],
+ srcList: [],
+ tempIndex: 0,
+ showViewer: false,
+ }
+ },
+ watch: {
+ fileList: {
+ handler(val) {
+ console.log(val);
+ if (val.length==0) {
+ this.realList = []
+ this.srcList = []
+ }
+ }
+
+ }
+ },
+ methods: {
+ beforeUpload(file) {
+ this.$emit('beginUpload')
+ return true
+ },
+ // 涓婁紶鍥剧墖鎴愬姛
+ uploadSuccess (res, file, fileList) {
+ // console.log('this.fileList', this.fileList);
+ // console.log('fileList', fileList);
+ this.$emit('uploadEnd')
+ this.realList = fileList
+ this.srcList.push(res.data.url)
+ // console.log('file', file);
+ if (res.code === 200) {
+ this.fileList.push(
+ {
+ fileurl: res.data.imgaddr,
+ name: res.data.originname,
+ url: res.data.url
+ }
+ )
+ } else {
+ this.$message.error(res.msg || '涓婁紶澶辫触')
+ }
+ },
+ fail (err, file, fileList) {
+ this.$emit('uploadEnd')
+ this.$message.error('涓婁紶澶辫触')
+ },
+ handlePictureCardPreview(file) {
+ // this.tempIndex = this.srcList.findIndex(item => item == file.response.data.url )
+ // console.log(file);
+ this.tempIndex = this.fileList.findIndex(item => item.url == file.url )
+ // console.log( this.tempIndex);
+ this.srcList = this.fileList.map(item => item.url)
+ this.showViewer = true
+ },
+ closeViewer() {
+ this.showViewer = false
+ },
+ handleRemove(file) {
+ console.log(this.fileList);
+ let tempIndex = this.realList.findIndex(item => item.url === file.url)
+ // debugger
+ this.realList.splice(tempIndex, 1)
+ this.fileList.splice(tempIndex, 1)
+ this.srcList.splice(tempIndex, 1)
+
+ }
+ },
+}
+</script>
+
+<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