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

Question

我正在使用 Angular 8。我将图像发送到我的 ApiController 来保存图像。我在 Angular 7 之前使用过，一切正常，升级到 Angular 8 后我没有收到该文件。当我发送时，我在控制台中看到文件的名称和长度，但在 Api 中没有看到它。我在这里缺少什么？我的角度 tsimport { 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, 

  {

  headers: HttpUploadOptions,

  reportProgress: true

}).subscribe(res => {

    this.localStorageService.setItem('UserLoginClaims', res);

    this.fileUploaded = true;

    this.loading = false;

    this._bottomSheetRef.containerInstance.enter();

  });