lgp-admin-plus/apps/web-antd/src/components/form/components/upload-image.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue';

import { useVModel } from '@vueuse/core';
import { Modal, Upload } from 'ant-design-vue';

import { uploadFile } from '#/api/core/upload';
import { Icon } from '#/components/icon';

defineOptions({
  name: 'UploadImage',
  inheritAttrs: false,
});

const props = defineProps({
  modelValue: {
    type: Array as () => string[],
    default: () => [],
  },
  multiple: {
    type: Boolean,
    default: true,
  },
  maxCount: {
    type: Number,
    default: 9,
  },
});

const emits = defineEmits(['update:modelValue']);

const mValue = useVModel(props, 'modelValue', emits, {
  passive: true,
});

const fileList = ref(
  props.modelValue.map((url) => ({
    uid: url,
    name: url.split('/').pop() || 'file',
    status: 'done',
    url,
  })),
);

// 监听 modelValue 变化，同步到 fileList
watch(props.modelValue, (newVal) => {
  fileList.value = newVal.map((url) => ({
    uid: url,
    name: url.split('/').pop() || 'file',
    status: 'done',
    url,
  }));
});

// 监听 fileList 变化，同步到 modelValue
watch(fileList, (newVal) => {
  mValue.value = newVal
    .filter((file) => file.status === 'done' && file.url)
    .map((file) => file.url);
});

const customRequest = async (e: any) => {
  try {
    const res = await uploadFile({
      file: e.file,
    });

    // 更新 fileList
    fileList.value = [
      ...fileList.value.filter((file) => file.status !== 'uploading'),
      {
        uid: res.url,
        name: e.file.name,
        status: 'done',
        url: res.url,
      },
    ];

    // 更新 modelValue
    mValue.value = fileList.value.map((file) => file.url);

    // 触发上传完成回调
    e.onSuccess?.(res);
  } catch (error) {
    console.error('上传失败', error);
    e.onError?.(error);
  }
};

const handleRemove = (file: any) => {
  // 从 fileList 中移除
  fileList.value = fileList.value.filter((item) => item.uid !== file.uid);

  // 更新 modelValue
  mValue.value = fileList.value.map((file) => file.url);
};

const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');

const handlePreview = async (file) => {
  previewImage.value = file.response.url || file.preview;
  previewVisible.value = true;
  previewTitle.value =
    file.name || file.url.slice(Math.max(0, file.url.lastIndexOf('/') + 1));
};

// 计算是否还能上传更多图片
const showUploadButton = computed(() =>
  props.multiple
    ? fileList.value.length < props.maxCount
    : fileList.value.length === 0,
);
</script>

<template>
  <Upload
    v-model:value="fileList"
    :custom-request="customRequest"
    :multiple="multiple"
    :limit="maxCount"
    :show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
    list-type="picture-card"
    @remove="handleRemove"
    @preview="handlePreview"
  >
    <div v-if="showUploadButton" class="upload-button">
      <Icon icon="ant-design:plus-outlined" />
      <div class="ant-upload-text">上传图片</div>
    </div>
  </Upload>
  <Modal
    v-model:visible="previewVisible"
    :title="previewTitle"
    footer=""
    width="60%"
  >
    <img alt="example" style="width: 100%" :src="previewImage" />
  </Modal>
</template>

<style lang="less" scoped>
.m-avatar-wrap {
  position: relative;
  height: 102px;
  width: 102px;

  .m-avatar-icon-delete {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 0 0 0 4px;
    padding: 2px 4px;
  }

  &:hover .m-avatar-icon-delete {
    opacity: 1;
  }
}

.upload-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: pointer;
}
</style>