CameraMachine/frontend/src/components/upload/index.vue

<template>
  <div class="upload-warp picture-card">
    <div v-if="!base64Image" class="flex col uplaod-btn" @click="openImage">
      <el-icon>
        <Plus />
      </el-icon>
      <div class="add-text">添加</div>
    </div>
    <div v-if="base64Image" class="image-out">
      <img class="el-upload-list__item-thumbnail" :src="'file:///'+base64Image" alt="" />
      <span class="el-upload-list__item-actions">
        <span  @click="handlePictureCardPreview(base64Image)">
          <el-icon><zoom-in /></el-icon>
        </span>
        <span v-if="!disabled" class="mar-left-10"  @click="handleRemove()">
          <el-icon>
            <Delete />
          </el-icon>
        </span>
      </span>
    </div>
  </div>
  <!-- <img v-if="base64Image" :src="base64Image">
  <div class="input" v-if="filePath">{{filePath}}</div> -->

  <!--
  <el-upload class="upload-warp" action="#" list-type="picture-card" :http-request="upload">

    <div class="flex col">
      <el-icon>
        <Plus />
      </el-icon>
      <div class="add-text">添加</div>
    </div>
    <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 class="w-full" :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'
import { imagesUpload } from '@/utils/appconfig'
import { ElMessage } from 'element-plus'
import * as  userApi from '@/apis/user'

import client from "@/stores/modules/client";
import icpList from '@/utils/ipc'
const clientStore = client();
// 定义自定义事件
const emit = defineEmits(['input']);

interface Props {
  value: string
  hasDel?: boolean
  hasSize?: boolean
  width?: number
  height?: number
  fileSize?: number
  styleWidth?: string
  accept?: string[]
}
const props = withDefaults(defineProps<Props>(), {
  value: '',
  hasDel: true,
  hasSize: true,
  width: 0,
  height: 0,
  fileSize: imagesUpload.fileSize,
  styleWidth: '160',
  accept: () => imagesUpload.accept
})

const dialogImageUrl = ref('')

const dialogVisible = ref(false)

const disabled = ref(false)

const handleRemove = () => {
  filePath.value = ''
  base64Image.value = ''
  emit('input' , '' )
}

const handlePictureCardPreview = (base64Image) => {
  dialogImageUrl.value = base64Image!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}

const base64Image = ref('')
const filePath = ref('')
function openImage() {

  clientStore.ipc.removeAllListeners(icpList.utils.openImage);
  clientStore.ipc.send(icpList.utils.openImage);
  clientStore.ipc.on(icpList.utils.openImage, async (event, result) => {
    filePath.value = result.filePath
    base64Image.value = result.filePath
    clientStore.ipc.removeAllListeners(icpList.utils.openImage);
    emit('input' ,result.filePath)
  })
}
</script>


<style lang="scss" scoped>
// .upload-warp {
//   ::v-deep {
//     .el-upload--picture-card {
//       background-color: #fff;

//       .el-icon,
//       .add-text {
//         color: #2957FF;
//       }
//     }
//   }
// }

.uplaod-btn {
  width: 120px;
  height: 120px;
  cursor: pointer;
  background: #fff;
  border-radius: 6px;
  border: 1px dashed #B3B4B5;

  .el-icon,
  .add-text {
    color: #2957FF;
    font-size: 14px;
  }

  &:hover {
    border: 1px dashed #2957FF;
  }
}

.image-out {
  width: 120px;
  height: 120px;
  position: relative;
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  overflow: hidden;

  .el-upload-list__item-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .el-upload-list__item-actions{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: var(--el-overlay-color-lighter);
    transition: opacity var(--el-transition-duration);
    span{
        display: none;
        cursor: pointer;
      }
    &:hover{
      opacity: 1;
      span{
        display: inline-flex;
        cursor: pointer;
        width: 20px;
      }
    }
    // .el-upload-list__item-preview,
    // .el-upload-list__item-delete{

    // }
  }
}
</style>