如何将angular 4中的图片上传到Web API？

在Angular 4中将图片上传到Web API可以通过以下步骤实现：

在Angular项目中创建一个图片上传的组件，可以使用Angular Material的文件上传组件或者自定义的表单控件。
在组件中，监听文件选择事件，并获取选中的图片文件。
使用FormData对象创建一个表单数据对象，并将选中的图片文件附加到FormData中。
使用Angular的HttpClient模块发送HTTP POST请求到Web API的上传图片接口。
在Web API中，接收到图片文件后，可以使用相应的后端技术进行处理，如ASP.NET Web API、Node.js等。
在Web API中，可以将接收到的图片文件保存到服务器的指定位置，并返回相应的上传成功信息或者图片的URL地址。

以下是一个示例代码：

在Angular组件中：

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

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.css']
})
export class ImageUploadComponent {
  selectedImage: File;

  constructor(private http: HttpClient) { }

  onFileSelected(event): void {
    this.selectedImage = event.target.files[0];
  }

  onUpload(): void {
    const formData = new FormData();
    formData.append('image', this.selectedImage);

    this.http.post('https://your-web-api-url/upload', formData)
      .subscribe(response => {
        console.log('Upload success:', response);
      }, error => {
        console.error('Upload error:', error);
      });
  }
}

在Web API中（以ASP.NET Web API为例）：

[Route("api/[controller]")]
[ApiController]
public class ImageController : ControllerBase
{
    [HttpPost("upload")]
    public IActionResult UploadImage(IFormFile image)
    {
        // 处理图片上传逻辑，保存到服务器指定位置
        // 返回上传成功信息或者图片的URL地址

        return Ok(new { message = "Upload success" });
    }
}

请注意，以上示例代码仅供参考，具体实现方式可能因项目需求和后端技术而异。在实际开发中，还需要考虑图片的验证、文件大小限制、安全性等因素。