fix:简化项目框架，终版，处理后台现有问题

web

2025-03-18 8bd42ffbca0bcb0dc18ab17fa8858cd4b333104e

 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>