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 +++++++++++++++++++
src/views/dg/danger/index.vue | 89 +++++++++++++++++++----------
2 files changed, 114 insertions(+), 33 deletions(-)
diff --git a/src/views/dg/danger/index.vue b/src/views/dg/danger/index.vue
index 8a9b40c..df55df3 100644
--- a/src/views/dg/danger/index.vue
+++ b/src/views/dg/danger/index.vue
@@ -102,26 +102,48 @@
<el-form-item label="瀹屾垚鎯呭喌" prop="performance">
<el-input v-model="form.performance" 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="璇烽�夋嫨">
<el-option key="1" label="宸插惎鐢�" :value="1" />
<el-option key="2" label="宸茬鐢�" :value="2" />
</el-select>
</el-form-item>
- <el-upload
- label="涓婁紶鍥剧墖"
- v-model:file-list="fileList"
- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
- list-type="picture-card"
- :on-preview="handlePictureCardPreview"
- :on-remove="handleRemove"
- >
- <el-icon><Plus /></el-icon>
- </el-upload>
- <el-dialog v-model="dialogVisible">
- <img w-full :src="dialogImageUrl" alt="Preview Image" />
- </el-dialog>
</el-form>
<template #footer>
<div class="dialog-footer">
@@ -141,31 +163,13 @@
<script setup name="DangerInfo" lang="ts">
import { getDangerType, listDangerInfo, getDangerInfo, delDangerInfo, addDangerInfo, updateDangerInfo } from '@/api/dg/dangerInfo';
import { DangerInfoVO, DangerInfoQuery, DangerInfoForm } from '@/api/dg/dangerInfo/types';
-import type { TabsPaneContext, UploadProps, UploadUserFile } from "element-plus";
-const fileList = ref<UploadUserFile[]>([])
+import type { TabsPaneContext } from "element-plus";
-const dialogImageUrl = ref('')
-const dialogVisible = ref(false)
-
-const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
- console.log(uploadFile, uploadFiles)
-}
-
-const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
- dialogImageUrl.value = uploadFile.url!
- dialogVisible.value = true
-}
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext) => {
tab.props.label
}
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const activeIndex = ref('1')
-const activeIndex2 = ref('1')
-const handleSelect = (key: string, keyPath: string[]) => {
- console.log(key, keyPath)
-}
const dangerInfoList = ref<DangerInfoVO[]>([]);
const buttonLoading = ref(false);
@@ -347,4 +351,25 @@
getList();
getDangerTypes();
});
+
+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>
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