From a473c0680b7b003c33fa6ae5f646eb851e17fe8f Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期三, 06 三月 2024 18:06:56 +0800
Subject: [PATCH] 上传图片
---
src/views/tp/trafficPropaganda/index.vue | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 57 insertions(+), 1 deletions(-)
diff --git a/src/views/tp/trafficPropaganda/index.vue b/src/views/tp/trafficPropaganda/index.vue
index e80cbe4..3255ac6 100644
--- a/src/views/tp/trafficPropaganda/index.vue
+++ b/src/views/tp/trafficPropaganda/index.vue
@@ -77,8 +77,43 @@
<el-form-item label="鏍囬" prop="title">
<el-input v-model="form.title" placeholder="璇疯緭鍏ユ爣棰�" />
</el-form-item>
- <el-form-item label="鎺掑簭" prop="title">
+ <el-form-item label="鎺掑簭" prop="sequence">
<el-input v-model="form.sequence" placeholder="璇疯緭鍏ユ帓搴�" />
+ </el-form-item>
+ <el-form-item label="瑙嗛" prop="">
+ <el-upload action="#" list-type="picture-card" :auto-upload="false">
+ <el-icon><Plus /></el-icon>
+ <template #file="{ file }">
+ <div>
+ <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+ <span class="el-upload-list__item-actions">
+ <span
+ class="el-upload-list__item-preview"
+ @click="handlePictureCardPreview(file)"
+ >
+ <el-icon><zoom-in /></el-icon>
+ </span>
+ <span
+ v-if="!disabled"
+ class="el-upload-list__item-delete"
+ @click="handleDownload(file)"
+ >
+ <el-icon><Download /></el-icon>
+ </span>
+ <span
+ v-if="!disabled"
+ class="el-upload-list__item-delete"
+ @click="handleRemove(file)"
+ >
+ <el-icon><Delete /></el-icon>
+ </span>
+ </span>
+ </div>
+ </template>
+ </el-upload>
+ <el-dialog v-model="dialogVisible">
+ <img w-full :src="dialogImageUrl" alt="Preview Image" />
+ </el-dialog>
</el-form-item>
<el-form-item label="鐘舵��" prop="status">
<el-select v-model="form.status" placeholder="璇烽�夋嫨">
@@ -249,4 +284,25 @@
onMounted(() => {
getList();
});
+
+import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
+
+import type { UploadFile } from 'element-plus'
+
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+const disabled = ref(false)
+
+const handleRemove = (file: UploadFile) => {
+ console.log(file)
+}
+
+const handlePictureCardPreview = (file: UploadFile) => {
+ dialogImageUrl.value = file.url!
+ dialogVisible.value = true
+}
+
+const handleDownload = (file: UploadFile) => {
+ console.log(file)
+}
</script>
--
Gitblit v1.8.0