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

나는 다음과 같은 작업을 수행 한 :

Microsoft.AspNetCore.Http를 사용하여 닷넷 코어 2.0 웹 API를

에서을;

은 내가 모델 클래스

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

. 감사!