JCSS / jcss-miniprogram

  <template>

    <view class="upload-images-container">
      <!-- 已上传图片预览（uView Album组件） -->
      <up-album
          v-if="imageList.length > 0"
          :list="imageList"
          :max-count="maxCount"
          :show-delete="showDelete"
          @delete="handleDelete"
          @preview="handlePreview"
          :border-radius="8"
          :column="column"
          :gap="15"
      ></up-album>
  
      <!-- 上传按钮 -->
      <up-upload
          class="upload-btn"
          :disabled="imageList.length >= maxCount"
          :multiple="true"
          :max-count="maxCount - imageList.length"
          @after-read="handleAfterRead"
          :previewFullImage="true"
      >
        <view class="upload-btn-inner">
          <up-icon name="plus" color="#999" size="24"></up-icon>
          <text class="upload-tips" v-if="imageList.length < maxCount">上传图片</text>
          <text class="upload-tips" v-else>已达上限</text>

        </view>

      </up-upload>

    </view>
  </template>
  

  <script setup lang="ts">
  import { ref, watch, defineProps, defineEmits, withDefaults } from 'vue';
  import { uploadImages } from '@/common/utils/upload.js';
  
  
  // 定义Props
  const props = withDefaults(
      defineProps<{
        // 已上传图片列表（双向绑定）
        value: string[];
        // 最大上传数量
        maxCount?: number;
        // 是否显示删除按钮
        showDelete?: boolean;
        // 相册列数
        column?: number;
        // 上传文件key名
        fileKey?: string;
        // 自定义请求头（覆盖默认）
        header?: Record<string, string>;
        // 上传失败是否继续（多图时）
        ignoreError?: boolean;
      }>(),
      {
        maxCount: 9,
        showDelete: true,
        column: 3,
        fileKey: 'file',
        ignoreError: true
      }
  );

  // 定义Emits
  const emit = defineEmits<{
    // 双向绑定更新图片列表
    (e: 'update:value', val: string[]): void;
    // 单张/多张上传成功
    (e: 'upload-success', urls: string[]): void;
    // 上传失败
    (e: 'upload-error', err: any): void;
    // 删除图片
    (e: 'delete-image', index: number): void;
    // 预览图片
    (e: 'preview-image', index: number): void;
  }>();

  // 内部维护的图片列表
  const imageList = ref([...props.value]);

  // 监听父组件传入的value变化
  watch(
      () => props.value,
      (newVal) => {
        imageList.value = [...newVal];
      },
      { immediate: true }
  );
  
  // 监听内部列表变化，同步给父组件
  watch(
      () => imageList.value,
      (newVal) => {
        emit('update:value', [...newVal]);
      },
      { deep: true }
  );
  
  /**
   * 选择图片后触发（上传核心逻辑）
   */
  const handleAfterRead = async (event: any) => {
    // 获取选择的图片临时路径
    const filePaths = event.file.map((item: any) => item.url);

    try {

      uni.showLoading({ title: '上传中...' });
      // 调用公共上传方法
      const uploadUrls = await uploadImages({
        filePaths,
        fileKey: props.fileKey,
        header: props.header,
        ignoreError: props.ignoreError
      });
  
      if (uploadUrls.length > 0) {
        // 合并到已上传列表
        imageList.value = [...imageList.value, ...uploadUrls];
        // 通知父组件上传成功
        emit('upload-success', uploadUrls);
        uni.showToast({ title: `成功上传${uploadUrls.length}张图片`, icon: 'success' });
      }

    } catch (err) {

      emit('upload-error', err);
      console.error('图片上传失败：', err);
    } finally {
      uni.hideLoading();

    }
  };
  

  /**
   * 删除图片
   */
  const handleDelete = (index: number) => {

    imageList.value.splice(index, 1);

    emit('delete-image', index);
    uni.showToast({ title: '删除成功', icon: 'success' });
  };
  
  /**
   * 预览图片
   */
  const handlePreview = (index: number) => {
    emit('preview-image', index);
    // 原生预览（可选）
    uni.previewImage({
      urls: imageList.value,
      current: imageList.value[index]
    });

  };
  </script>
  

  <style lang="scss" scoped>
  .upload-images-container {
    padding: 10rpx 0;
  }
  
  // 上传按钮样式
  .upload-btn {
    margin-top: 15rpx;
    width: 200rpx;
    height: 200rpx;
    border: 1px dashed #e5e5e5;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
  
    .upload-btn-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .upload-tips {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
  
  // 适配Album组件样式
  :deep(.u-album__item) {
    border-radius: 8rpx !important;
    overflow: hidden;
  }
  
  :deep(.u-album__delete) {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    width: 40rpx !important;
    height: 40rpx !important;
    top: 0 !important;
    right: 0 !important;
  }

  </style>