From 2f0fa3545b539e8b6f952ea82a1ca2350c64a0e8 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 22 四月 2025 17:28:48 +0800
Subject: [PATCH] fix:修改报警，添加参数
---
src/components/UploadIcons/index.vue | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 104 insertions(+), 0 deletions(-)
diff --git a/src/components/UploadIcons/index.vue b/src/components/UploadIcons/index.vue
new file mode 100644
index 0000000..1dd30da
--- /dev/null
+++ b/src/components/UploadIcons/index.vue
@@ -0,0 +1,104 @@
+<template>
+ <el-upload
+ v-model:file-list="fileList"
+ list-type="picture-card"
+ :on-preview="handlePictureCardPreview"
+ :on-remove="handleRemove"
+ :on-exceed="handleExceed"
+ :http-request="uploadImg"
+ :limit="props.limit"
+ :disabled="props.disabled"
+ >
+ <el-icon><Plus /></el-icon>
+ </el-upload>
+
+ <el-dialog v-model="dialogVisible">
+ <img w-full :src="dialogImageUrl" alt="Preview Image" />
+ </el-dialog>
+</template>
+
+<script setup>
+ import { ref } from 'vue'
+ import { Plus } from '@element-plus/icons-vue'
+
+ import { ElMessage } from 'element-plus'
+ import { upload } from '@/api/basicApi/index'
+
+ // import type { UploadProps } from 'element-plus'
+ import { getImage, setImage } from '@/utils/validate.js'
+ const props = defineProps({
+ imageList: {
+ type: String,
+ default: '',
+ },
+ limit: {
+ type: Number,
+ },
+ disabled:{
+ type: Boolean,
+ default:false,
+ },
+ })
+ const fileList = ref([])
+ const file = ref([])
+
+ const emit = defineEmits(['uploadData'])
+ // const imageUrl = ref('')
+
+ const dialogImageUrl = ref('')
+ const dialogVisible = ref(false)
+
+ const handleRemove = (_, uploadFiles) => {
+ file.value = uploadFiles.map((item)=>{return item.url})
+ emit('uploadData', file.value)
+ }
+
+ const handlePictureCardPreview = (uploadFile) => {
+ dialogImageUrl.value = uploadFile.url
+ dialogVisible.value = true
+ }
+ //超出限制
+ const handleExceed = () => {
+ ElMessage({ message: `只能上传${props.limit}张图片`, type: 'error' })
+ }
+ //上传图片调用接口
+ const uploadImg = async (params) => {
+ //建立表单，请求参数传表单形式
+ let form = new FormData();
+ form.append("file1", params.file);
+ form.append("fileId", params.file.lastModified);
+ form.append("path", 'hydropower');
+ //发出上传文件请求
+ let res = await upload().uploadFile(form)
+ if(res.code == 200){
+ //返回的图片网络地址传给form
+ ElMessage({ message: '上传图片成功', type: 'success' })
+ file.value.push(res.data.newFileName)
+ emit('uploadData', setImage(file.value))
+ }
+ }
+ //监听props.image
+ watch(props, (newvalue)=>{
+ let newList = ''
+ if(newvalue.imageList!='' && newvalue.imageList != null){
+ newList = getImage(newvalue.imageList).join(',')
+ }
+ if( newList != ''){
+ //判断是否加上PREURL前缀
+ if(file.value.join(',') != newList){
+ let list = []
+ newList.split(',').forEach((item)=>{
+ list.push({
+ url: item
+ })
+ })
+ fileList.value = list
+
+ file.value = newList.split(',')
+ }
+ }else{
+ fileList.value = [] //父组件image从有值到空变化，也要清空一遍组件中的值
+ file.value = []
+ }
+ },{immediate:true})
+</script>
\ No newline at end of file
--
Gitblit v1.9.3