Angular 8 将图像上传到 ApiController c# 从 Angular 7

Question

我正在使用 Angular 8。我将图像发送到我的 ApiController 来保存图像。我在 Angular 7 之前使用过，一切正常，升级到 Angular 8 后我没有收到该文件。

当我发送时，我在控制台中看到文件的名称和长度，但在 Api 中没有看到它。

我在这里缺少什么？

我的角度 ts

import { timeout } from 'rxjs/operators';

import { UserClaims } from './../../authentication/models/user-claims.model';

import { PrivateZoneLoginService } from './../private-zone-login.service';

import { Component, OnInit } from '@angular/core';

import { MatBottomSheetRef } from '@angular/material/bottom-sheet';

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

import { LocalStorageService } from 'src/app/app-services/local-storage.service';

import { PrivateZoneConstants } from '../private-zone-constans';

@Component({

  selector: 'app-bottom-sheet',

  templateUrl: './bottom-sheet.component.html',

  styleUrls: ['./bottom-sheet.component.css']

})

export class BottomSheetComponent implements OnInit {  token = this.pzLogin.userLoginAccessToken;

  public imagePath;

  imgURL: any = this.pzLogin.UserLoginClaims.ImageUrl;

  public message: string;

  fileData = new FileReader();

  reader = new FileReader();

  fileUploaded: boolean = false; 

  loading: boolean = false;

  constructor(

    private _bottomSheetRef: MatBottomSheetRef<BottomSheetComponent>,

    private http: HttpClient, private pzLogin: PrivateZoneLoginService,

    private localStorageService: LocalStorageService) { }

  openLink(event: MouseEvent): void {

    this._bottomSheetRef.dismiss();

    event.preventDefault();

  }

  ngOnInit() {

  }

  preview(event) {

    if (event.files.length === 0) {

      return;

    }

    const mimeType = event.files[0].type;

    if (mimeType.match(/image\/*/) == null) {

      this.message = 'Only images are supported.';

      return;

    }

    const fileSize = event.files[0].size;

    if (fileSize > 500839) {

      this.message = 'Maximum upload file size 200 kb.';

      return;

    }

Answer 1

您需要自己添加标题。并检查您的 HttpInterceptor 是否不会覆盖您的标头这将解决问题const HttpUploadOptions = new HttpHeaders();HttpUploadOptions.append('Content-Type', 'multipart/form-data');HttpUploadOptions.append('Accept', 'image/x-png,image/gif,image/jpeg');this.http.post(PrivateZoneConstants.UploadUserImage, formData,&nbsp;&nbsp; {&nbsp; headers: HttpUploadOptions,&nbsp; reportProgress: true}).subscribe(res => {&nbsp; &nbsp; this.localStorageService.setItem('UserLoginClaims', res);&nbsp; &nbsp; this.fileUploaded = true;&nbsp; &nbsp; this.loading = false;&nbsp; &nbsp; this._bottomSheetRef.containerInstance.enter();&nbsp; });