Angular 10在ngFOR中上传图片

Angular 10是一种流行的前端开发框架，它使用TypeScript编写，并由Google维护。ngFor是Angular中的一个内置指令，用于在模板中循环渲染数据。

在ngFor中上传图片可以通过以下步骤实现：

1. 在组件中定义一个图片上传的方法，该方法将处理文件选择和上传逻辑。可以使用Angular的HttpClient模块来发送HTTP请求。
2. 在模板中使用ngFor指令来循环渲染一个包含上传图片的表单元素。可以使用input[type="file"]来创建文件选择框。
3. 绑定文件选择框的change事件，当用户选择文件时触发上传方法。
4. 在上传方法中，获取用户选择的文件，并使用FormData对象创建一个表单数据对象。
5. 将文件数据添加到FormData对象中，并使用HttpClient模块发送POST请求到服务器。
6. 在服务器端接收到请求后，进行文件的处理和保存。

以下是一个示例代码：

组件代码：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-upload',
  template: `
    <input type="file" (change)="onFileSelected($event.target.files)">
    <button (click)="upload()">上传</button>
  `
})
export class UploadComponent {
  selectedFiles: File[];

  constructor(private http: HttpClient) {}

  onFileSelected(files: FileList) {
    this.selectedFiles = Array.from(files);
  }

  upload() {
    const formData = new FormData();
    this.selectedFiles.forEach(file => {
      formData.append('files', file, file.name);
    });

    this.http.post('http://example.com/upload', formData)
      .subscribe(response => {
        console.log('上传成功');
      }, error => {
        console.error('上传失败', error);
      });
  }
}

在上面的示例中，我们创建了一个UploadComponent组件，其中包含一个文件选择框和一个上传按钮。当用户选择文件后，会调用onFileSelected方法将选择的文件保存到selectedFiles数组中。然后，当用户点击上传按钮时，会调用upload方法，该方法将选中的文件通过HTTP POST请求发送到服务器。

请注意，上述示例中的上传URL（'http://example.com/upload'）是一个示例，你需要将其替换为实际的上传URL。

推荐的腾讯云相关产品：腾讯云对象存储（COS）

腾讯云对象存储（COS）是一种高可用、高可靠、弹性扩展的云存储服务，适用于存储海量文件、大数据分析、静态网站托管、备份恢复、容灾存储等场景。它提供了简单易用的API接口和控制台，可以方便地进行文件的上传、下载、删除等操作。

产品介绍链接地址：腾讯云对象存储（COS）

请注意，以上答案仅供参考，具体实现方式可能因项目需求和环境而异。