Task 8.3 完成报告：实现 ImageUploadComponent

任务概述

实现商品发布表单的图片上传组件，支持拖拽上传、文件选择、图片预览、删除图片、上传进度显示，并限制最多5张图片。

实现内容

1. 创建 ImageUploadComponent 组件

文件位置： src/app/shared/components/image-upload/

组件功能

✅ 支持拖拽上传图片
✅ 支持点击选择文件
✅ 图片预览（网格布局）
✅ 删除图片功能
✅ 上传进度显示（模拟）
✅ 限制最多5张图片
✅ 图片序号显示
✅ 悬停显示操作按钮
✅ 响应式布局

核心特性

1. 拖拽上传

onDragOver(event: DragEvent): void {
  event.preventDefault();
  event.stopPropagation();
  this.isDragging = true;
}

onDrop(event: DragEvent): void {
  event.preventDefault();
  event.stopPropagation();
  this.isDragging = false;
  
  const files = event.dataTransfer?.files;
  if (files && files.length > 0) {
    this.handleFiles(Array.from(files));
  }
}

2. 文件选择

onFileSelect(event: Event): void {
  const input = event.target as HTMLInputElement;
  if (input.files && input.files.length > 0) {
    this.handleFiles(Array.from(input.files));
    input.value = ''; // 清空，允许重复选择
  }
}

3. 图片数量限制

private handleFiles(files: File[]): void {
  const imageFiles = files.filter(file => file.type.startsWith('image/'));
  
  if (imageFiles.length === 0) {
    alert('请选择图片文件');
    return;
  }
  
  const remainingSlots = this.maxCount - this.images.length;
  if (remainingSlots <= 0) {
    alert(`最多只能上传 ${this.maxCount} 张图片`);
    return;
  }
  
  const filesToAdd = imageFiles.slice(0, remainingSlots);
  // ...
}

4. 上传进度模拟

private simulateUpload(imageFile: ImageFile): void {
  this.uploading = true;
  
  const interval = setInterval(() => {
    if (imageFile.progress! < 100) {
      imageFile.progress! += 10;
    } else {
      imageFile.uploading = false;
      clearInterval(interval);
      
      const allUploaded = this.images.every(img => !img.uploading);
      if (allUploaded) {
        this.uploading = false;
        this.emitChange();
      }
    }
  }, 100);
}

5. 图片预览和删除

previewImage(index: number): void {
  const imageFile = this.images[index];
  window.open(imageFile.url, '_blank');
}

removeImage(index: number): void {
  const imageFile = this.images[index];
  
  // 释放 URL 对象
  if (imageFile.url.startsWith('blob:')) {
    URL.revokeObjectURL(imageFile.url);
  }
  
  this.images.splice(index, 1);
  this.emitChange();
}

2. 组件接口

export interface ImageFile {
  file: File;
  url: string;
  uploading?: boolean;
  progress?: number;
}

@Component({...})
export class ImageUploadComponent {
  @Input() maxCount = 5;
  @Input() existingImages: string[] = [];
  @Output() imagesChange = new EventEmitter<ImageFile[]>();
  
  images: ImageFile[] = [];
  isDragging = false;
  uploading = false;
}

3. 样式设计

网格布局

.image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

悬停效果

.image-actions {
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s;
  
  .image-item:hover & {
    opacity: 1;
  }
}

拖拽状态

.upload-area {
  border: 2px dashed #d9d9d9;
  
  &:hover {
    border-color: #1890ff;
    background-color: #f0f8ff;
  }
  
  &.dragging {
    border-color: #1890ff;
    background-color: #e6f7ff;
    border-style: solid;
  }
}

4. 集成到 ProductFormComponent

导入组件

import { ImageUploadComponent, ImageFile } from '../../../shared/components/image-upload/image-upload.component';

添加属性

existingImages: string[] = [];
imageFiles: ImageFile[] = [];

处理图片变化

onImagesChange(images: ImageFile[]): void {
  this.imageFiles = images;
  const imageUrls = images.map(img => img.url);
  this.productForm.patchValue({
    images: imageUrls
  });
}

模板使用

<app-image-upload
  [maxCount]="5"
  [existingImages]="existingImages"
  (imagesChange)="onImagesChange($event)"
></app-image-upload>

5. 单元测试

创建了完整的单元测试，覆盖以下场景：

✅ 组件创建 ✅ 默认配置（maxCount = 5） ✅ 空图片列表初始化 ✅ 加载已有图片 ✅ 拖拽事件处理（dragover, dragleave, drop） ✅ 删除图片 ✅ 预览图片 ✅ 计算剩余可上传数量 ✅ 文件选择处理 ✅ 过滤非图片文件 ✅ 遵守最大数量限制 ✅ 发出图片变化事件

测试结果： 14/14 通过 ✅

技术亮点

1. 用户体验优化

支持拖拽和点击两种上传方式
实时显示上传进度
悬停显示操作按钮，界面简洁
图片序号标识，方便管理
达到上限时显示友好提示

2. 文件处理

自动过滤非图片文件
使用 URL.createObjectURL 创建预览
正确释放 Blob URL 避免内存泄漏
支持编辑模式加载已有图片

3. 响应式设计

@media (max-width: 768px) {
  .image-list {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
  }
}

4. 类型安全

定义 ImageFile 接口
使用 TypeScript 严格类型检查
EventEmitter 类型化输出

验证需求

根据 Requirements 9.3：

✅ 创建上传区域（支持拖拽） - 实现了完整的拖拽功能 ✅ 实现文件选择逻辑 - 支持点击选择和拖拽上传 ✅ 实现图片预览 - 网格布局显示所有图片 ✅ 实现删除图片 - 悬停显示删除按钮 ✅ 实现上传进度显示 - 模拟上传进度条 ✅ 限制最多5张图片 - 严格限制数量并提示

文件清单

新增文件

src/app/shared/components/image-upload/image-upload.component.ts - 组件逻辑
src/app/shared/components/image-upload/image-upload.component.html - 组件模板
src/app/shared/components/image-upload/image-upload.component.scss - 组件样式
src/app/shared/components/image-upload/image-upload.component.spec.ts - 单元测试

修改文件

src/app/pages/products/product-form/product-form.component.ts - 集成图片上传
src/app/pages/products/product-form/product-form.component.html - 添加组件使用

后续建议

1. 功能增强

图片压缩（减小文件大小）
图片裁剪功能
拖拽排序图片
设置主图功能

2. 真实上传

当前使用模拟上传，后续可以：

集成真实的文件上传 API
使用 HttpClient 上传到服务器
处理上传失败重试
显示真实的上传进度

3. 图片优化

添加图片格式验证
限制图片大小
生成缩略图
支持更多图片格式

总结

成功实现了功能完整的图片上传组件，满足所有需求规格。组件具有良好的用户体验、完整的错误处理和响应式设计。已集成到商品发布表单中，可以正常使用。

任务状态： ✅ 已完成 测试状态： ✅ 全部通过（14/14） 需求覆盖： ✅ 100%

TASK_8.3_COMPLETION.md 7.2 KB Permalink Riwayat Mentahan