Angular 14向ASP.NET Core 6.0更新商品图片数据的实现疑问

我通过FormData将带图片数组的商品模型从Angular发送到ASP.NET Core 6.0 Rest API，API端通过Request.Form.Files获取图片并以内存流存入数据库，返回Angular时图片转为base64字符串。目前复用新增商品的逻辑做数据更新，name属性的更新已经实现，但图片这块的复杂属性不知道怎么处理，相关代码如下：

Image模型 #

import { SafeUrl } from "@angular/platform-browser";
export interface Image {
    id? : number,
    base64Image?: string,
    file : File,
    url?: SafeUrl
}

组件代码 #

export class PostProductComponent implements OnInit {
  @Input() newProduct: Product;
  @Input() editedProduct: Product;
  productForm: FormGroup;
  files: File[] = [];

  ngOnInit(): void {
   this.productForm = this.fb.group({
      id: [0],
      name: [''],
      images: this.fb.group({
        id: [0],
        file: [null]
      })
    });
  }
uploadImage(event: any) {
    this.files = event.target.files;
    const fileEvent = event.target.files[0];
        const imageHandle: Image = {
          file: fileEvent,
          url: this.sanitizer.bypassSecurityTrustUrl(
            window.URL.createObjectURL(fileEvent)
          )
        }
    this.product.images.push(imageHandle);
}
removeImages(i: number) {
    this.product.images.splice(i, 1);
  }
addProduct() {
    this.mapFormValuesToProdModel();
    const productFormData = this.prepareFormData(this.product);
    this.prodService.postProduct(productFormData).subscribe(add => {
      console.log(add);
    });
prepareFormData(productData: Product): FormData {
    const formData = new FormData();
    formData.append('name', productData.name);
    
    for (let i = 0; i < productData.images.length; i++) {
      formData.append('file', productData.images[i].file, productData.images[i].file.name);
    }
    return formData;
  }
mapFormValuesToProdModel() {
    this.product.name = this.productForm.value.name;
  } 
}
// 编辑与更新商品数据
// 获取并赋值编辑商品数据至product输入属性
onEditClick() {
    this.prodsComponent.emitData.subscribe((editedProduct) => {
       this.product = editedProduct;
       this.editProduct(this.product);
      }
    );
  }
// 在表单展示编辑数据，可更新name但不知如何更新图片数据
editProduct(product: Product) {
    this.productForm.patchValue({
      name: product.name,
    });
    for (const image of product.images) {
      image.url = 'data:image/jpg;base64,' + image.base64Image;
    }
}

图片模板代码 #

<div formGroupName="images">
   <div class="form-group">
     <div class="input-group">
        <input type="file" name="file" (change)="uploadImage($event)" multiple="multiple" />
     </div>
   </div>
  <div>
    <ng-container *ngFor="let file of product.images; let i = index;">
      <span (click)="removeImages(i)">x</span>
        <img [src]="file.url">
    </ng-container>
  </div>
</div>

解决方案 #

1. 调整Image模型 #

编辑场景下后端返回的图片只有id和base64Image，没有File对象，将file设为可选属性：

import { SafeUrl } from "@angular/platform-browser";
export interface Image {
    id?: number,
    base64Image?: string,
    file?: File, // 改为可选
    url?: SafeUrl
}

2. 重构表单的Images结构 #

图片是数组，表单需用FormArray替代FormGroup：

ngOnInit(): void {
  this.productForm = this.fb.group({
    id: [0],
    name: [''],
    images: this.fb.array([]) // 用FormArray存储图片数组
  });
}

// 辅助方法：获取images FormArray
get imagesFormArray() {
  return this.productForm.get('images') as FormArray;
}

3. 完善editProduct方法 #

处理后端返回的base64图片，同时区分旧图片与新增图片：

editProduct(product: Product) {
  this.productForm.patchValue({
    id: product.id,
    name: product.name
  });
  
  // 清空现有表单数组
  this.imagesFormArray.clear();
  
  // 为每个已有图片添加表单控件（仅存id，标记为已存在的图片）
  product.images.forEach(image => {
    this.imagesFormArray.push(this.fb.group({
      id: [image.id],
      file: [null]
    }));
    // 生成预览URL
    image.url = this.sanitizer.bypassSecurityTrustUrl(
      `data:image/jpg;base64,${image.base64Image}`
    );
  });
}

4. 修改prepareFormData方法 #

更新时需告知API哪些是要保留的旧图片（传id）、哪些是新增图片（传File）：

prepareFormData(productData: Product): FormData {
  const formData = new FormData();
  formData.append('id', productData.id.toString());
  formData.append('name', productData.name);
  
  // 传递旧图片的id，用于API识别要保留的图片
  productData.images.forEach(image => {
    if (image.id) {
      formData.append('existingImageIds', image.id.toString());
    }
  });
  
  // 传递新增的图片（带有File对象的）
  productData.images.forEach(image => {
    if (image.file) {
      formData.append('files', image.file, image.file.name);
    }
  });
  
  return formData;
}

5. 优化uploadImage方法 #

支持多选文件，并同步更新商品数组与表单数组：

uploadImage(event: any) {
  const files = event.target.files;
  if (files.length === 0) return;
  
  Array.from(files).forEach(file => {
    const imageHandle: Image = {
      file: file,
      url: this.sanitizer.bypassSecurityTrustUrl(
        window.URL.createObjectURL(file)
      )
    };
    this.product.images.push(imageHandle);
    // 同步添加到表单数组
    this.imagesFormArray.push(this.fb.group({
      id: [0],
      file: [file]
    }));
  });
}

6. 调整模板适配逻辑 #

去掉原有的formGroupName="images"，直接遍历商品的images数组做预览：

<div class="form-group">
  <div class="input-group">
    <input type="file" name="file" (change)="uploadImage($event)" multiple="multiple" />
  </div>
</div>
<div>
  <ng-container *ngFor="let image of product.images; let i = index;">
    <span (click)="removeImages(i)" style="cursor:pointer; margin-right:8px;">x</span>
    <img [src]="image.url" style="width:100px; height:auto; margin-right:16px;" />
  </ng-container>
</div>

7. ASP.NET Core API 调整 #

更新接口需接收existingImageIds（要保留的图片ID列表）和files（新增图片），逻辑如下：

1. 根据商品ID查询现有图片
2. 删除不在existingImageIds中的图片
3. 处理新增的files，转内存流存入数据库并关联商品
4. 返回更新后的商品数据，包含所有图片的base64字符串

内容的提问来源于stack exchange，提问作者Junior Dev