Téléchargement de fichier avec l'API Web ASP.Net Core 2.0 et React.js

Question

Je suis novice à la fois pour react.js et pour ASP.Net core 2.0. Et maintenant écrire un projet en utilisant ASP.Net core 2.0 comme API back-end et reac.js comme interface d'application (front-end). Je voudrais savoir comment télécharger un fichier. J'ai essayé comme suit mais dans le côté Back-end, la valeur du paramètre (fichier IFromFile) est toujours nulle. Et il semble que le fichier n'a pas été posté correctement. Voici mes codes:

core .Net (API)

[HttpPost] 
     [Route("upload")] 
     public async Task Upload(IFormFile file) 
     { 
      if (file == null) throw new Exception("File is null"); 
      if (file.Length == 0) throw new Exception("File is empty"); 

      using (Stream stream = file.OpenReadStream()) 
      { 
       using (var binaryReader = new BinaryReader(stream)) 
       { 
        var fileContent = binaryReader.ReadBytes((int)file.Length); 
        // await _uploadService.AddFile(fileContent, file.FileName, file.ContentType); 
       } 
      } 
     } 

React.js

handleClick(event){ 
     event.preventDefault(); 
     // console.log("handleClick",event); 
     var self = this; 
     var apiBaseUrl = axios.defaults.baseURL + "user/upload"; 
     if(this.state.filesToBeSent.length>0){ 
      var filesArray = this.state.filesToBeSent; 
      const reader = new FileReader(); 
      for(var i in filesArray){ 
       //console.log("files",filesArray[i][0]); 
       var file = filesArray[i][0]; 
       axios.post(apiBaseUrl, {data: file}); 
      } 
      alert("File upload completed"); 
     } 
     else{ 
      alert("Please select files first"); 
     } 
    } 

S'il vous plaît conseiller comment puis-je résoudre le problème.

Answer 1

I ont fait le travail comme suit:

à Net noyau 2.0 Web api

utilisant Microsoft.AspNetCore.Http;

J'ai créé une classe de modèle

namespace Marter_MRM.Models 
{ 
    public class FileUploadViewModel 
    { 
     public IFormFile File { get; set; } 
     public string source { get; set; } 
     public long Size { get; set; } 
     public int Width { get; set; } 
     public int Height { get; set; } 
     public string Extension { get; set; } 
    } 
} 

Et puis je crée une classe de contrôleur et a écrit la fonction comme suit.

[HttpPost] 
[Route("upload")] 
public async Task<IActionResult> Upload(FileUploadViewModel model) { 
     var file = model.File; 

     if (file.Length > 0) { 
      string path = Path.Combine(_env.WebRootPath, "uploadFiles"); 
      using (var fs = new FileStream(Path.Combine(path, file.FileName), FileMode.Create)) 
      { 
       await file.CopyToAsync(fs); 
      } 

      model.source = $"/uploadFiles{file.FileName}"; 
      model.Extension = Path.GetExtension(file.FileName).Substring(1); 
     } 
    return BadRequest(); 
} 

et écrire la fonction d'appel en api réagir comme suit:

handleUploadClick(event){ 
    event.preventDefault(); 
    var self = this; 
    var apiBaseUrl = axios.defaults.baseURL + "user/upload"; 
    if(this.state.filesToBeSent.length>0){ 
     var filesArray = this.state.filesToBeSent; 
     let f = new FormData(); 
     for(var i in filesArray){ 
     //console.log("files",filesArray[i][0]); 
      f = new FormData(); 
      f.append("File",filesArray[i][0]) 
      axios.post(apiBaseUrl, f, { 
        headers: {'Content-Type': 'multipart/form-data'} 
      }); 
     } 
     alert("File upload completed"); 
    } 
    else{ 
     alert("Please select files first"); 
    } 
} 

Il fonctionne parfaitement. Merci!