Impossible de télécharger un fichier d'Angular 8 vers Asp.net Core 2.2

J'ai un serveur principal asp.net (utilisant .net core 2.2) qui a FileUploadController qui écoute la demande de publication de fichier entrant.

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        // if (request.url.indexOf('/upload')) {
        //     return next.handle(request);
        // }
        const token = localStorage.getItem('token');
        const currentUser = JSON.parse(localStorage.getItem('user'));
        if (currentUser && token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${token}`,
                //    'Content-Type': 'application/json' <---- Main Problem.
                }
            });
        }
        return next.handle(request).pipe(catchError(err => this.handleError(err)));
    }
}

J'ai créé une application angulaire (en utilisant la version angulaire 8) qui peut choisir le fichier à télécharger à ClientApplication et j'ai créé trois services de publication qui ont appelé l'api" http: / / localhost: 5000 / api / fileupload / upload ".

1. Post Angular HttpClient standard. lorsque le serveur lit, IFormFile est nul.

   const formData: FormData = new FormData();
   formData.append('file', file, file.name);
   const req = new HttpRequest('POST', this.endpoint, formData);
   return this.http.request(req);
   

2. Ajout de HttpHeaders, j'essaie des en-têtes vides, undefined et d'autres solutions proposées par stackoverflow et google.

   const header = new HttpHeaders() //1
   header.append('enctype', 'multipart/form-data'); //2
   header.append('Content-Type', 'multipart/form-data'); //3
   

Si je mets httpheader avec des ressources en requête, le serveur donne 415 (type de média non pris en charge)

const formData: FormData = new FormData();
formData.append('file', file, file.name);
// return this.http.post(this.endpoint, file);
return this.http.post(this.endpoint, formData); // Problem solved

Je veux savoir est-ce un bug ou mon malentendu? Si vous consultez le didacticiel en ligne, la plupart des développeurs utilisent "this.HttpClient.post". D'après ce que j'ai lu, je peux utiliser httpclient.post et le cadre angulaire définira automatiquement l'en-tête approprié pour l'utilisateur. Il semble que cela ne fonctionne pas.

Après une enquête approfondie, la première erreur est mon erreur d'utiliser le fichier au lieu de formData, la deuxième erreur est l'en-tête "content-type" déclaré dans httpinterceptor qui après avoir été supprimé, il charge le fichier comme prévu.

[HttpPost("Upload")]
// public async Task<IActionResult> Upload([FromForm(Name="file")]IFormFile file) {
// public async Task<IActionResult> Upload([FromForm]IFormFile file) {
public async Task<IActionResult> Upload(IFormFile file) {
   Console.WriteLine("***" + file);
   if(file == null) return BadRequest("NULL FILE");
   if(file.Length == 0) return BadRequest("Empty File");
       Console.WriteLine("***" + host.WebRootPath);
   if (string.IsNullOrWhiteSpace(host.WebRootPath))
   {
      host.WebRootPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot");
   }
   var uploadsFolderPath = Path.Combine(host.WebRootPath, "uploads");
   if (!Directory.Exists(uploadsFolderPath)) Directory.CreateDirectory(uploadsFolderPath);
       var fileName = "Master" + Path.GetExtension(file.FileName);
       var filePath = Path.Combine(uploadsFolderPath, fileName);
       using (var stream = new FileStream(filePath, FileMode.Create))
       {
          await file.CopyToAsync(stream);
       }
       return Ok("Okay");
}  

Serveur: " https://github.com/ phonemyatt / TestPlaygroundServer "

Client:" https://github.com/ phonemyatt / TestPlayground "