使用angular和asp.net core在窗体内发送图像

如何使用Angular将带有输入类型文件的表单一次发送到asp.net core controller

我的模板：

<form [formGroup]="form" (ngSubmit)="onSubmit()" enctype="multipart/form-data"> 
      <input placeholder="User name" type="text" formControlName="userName"/>
      <input placeholder="Email" type="text" formControlName="email"/>
      <input type="file" formControlName="file">

      <button type="submit">Salvar</button>
</form>

用户服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from 'app/models/authentication/user';

@Injectable({ providedIn: 'root' })
export class UserService {
    constructor(private http: HttpClient) { }


    getCurrentUser(): Observable<User> {
      return this.http.get<User>('/Users/GetCurrentUser');
    }

    update(user: User) {
        return this.http.post('/users/update', user);
    }

}

以及控制器：

[HttpPut]
public async Task<IActionResult> Update([FromBody]ViewModels.Account.EditViewModel viewModel, IFormFile file)
{
    if (ModelState.IsValid)
    {
        if (file != null)
        {
            var path = Path.Combine(hostEnvironment.WebRootPath, "datafiles", "images", "users");
            model.Logo = FileUploadUtils.SaveToServer(path, file, new string[] { "jpg", "jpeg", "png" });


        ....

[HttpPut]
公共异步任务更新（[FromBody]ViewModels.Account.EditViewModel viewModel，IFormFile文件）
{
if（ModelState.IsValid）
{
如果（文件！=null）
{
var path=path.Combine（hostEnvironment.WebRootPath，“数据文件”、“图像”、“用户”）；
model.Logo=FileUploadUtils.SaveToServer（路径、文件、新字符串[]{“jpg”、“jpeg”、“png”}）；
....

控制器中的

文件

参数始终为空

---

我缺少什么？

必须使用多部分mime类型作为另一个rest端点发送文件。要在前端实现这一点，请使用FormData对象

const file = input.files[0]; // data from input file
const formData = new FormData();
formData.append('file', file);

// In service
updateUserFile(formData: FormData) {
    return this.http.post('/users/update', formData);
}

---

从控制器方法参数中删除

ifformfile文件

，并将其定义到您的ViewModelClass

EditViewModel

您是说我的用户控制器中需要两个操作？第一个用于更新用户数据，另一个用于更新图像？是的，第一个用于上载文件内容，第二个用于更新您的用户。在常见情况下，后端服务有一个文件实体来仅存储文件并通过ID识别它们。接下来，您可以在每个实体中使用文件ID来创建一个文件。

[HttpPut]
public async Task<IActionResult> Update([FromBody]ViewModels.Account.EditViewModel viewModel, IFormFile file)
{
    if (ModelState.IsValid)
    {
        if (file != null)
        {
            var path = Path.Combine(hostEnvironment.WebRootPath, "datafiles", "images", "users");
            model.Logo = FileUploadUtils.SaveToServer(path, file, new string[] { "jpg", "jpeg", "png" });


        ....

const file = input.files[0]; // data from input file
const formData = new FormData();
formData.append('file', file);

// In service
updateUserFile(formData: FormData) {
    return this.http.post('/users/update', formData);
}