ASP.Net Core 2.0 Web APIとReact.jsを使用したファイルアップロード

Question

react.jsとASP.Netコア2.0の両方を初めて使用しています。そして、現在、ASP.Netコア2.0をバックエンドAPIとして、react.jsをアプリケーションインターフェイス（フロントエンド）として使用してプロジェクトを作成しています。私はファイルをアップロードする方法を知りたいです。私は以下のように試みましたが、バックエンド側ではパラメータ値（IFromFileファイル）は常にnullです。ファイルが正しくポストされていないようです。ここに私のコードです：

ネットコア（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"); 
     } 
    } 

私は問題を解決する方法を教えてください。

Answer 1

私は以下のように仕事行っている：.NETのコア2.0ウェブAPI Microsoft.AspNetCore.Httpを使用して

で

を。

私はモデルクラス

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; } 
    } 
} 

を作成した。そして、私は、コントローラクラスを作成し、次のように機能を書きました。

[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(); 
} 

そして、次のように反応するにはAPI呼び出し関数を記述：

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"); 
    } 
} 

それは完璧に動作します。ありがとう！