웹 api 파일을 업로드 할 수 없습니다

Question

나는 토큰 기반 인증을 성공적으로 수행 한 웹 API 프로젝트를 작성 중입니다. 하지만 웹 api에 이미지를 업로드하는 데 어려움을 겪고 있습니다.

내가보기

self.uploadApi = function() { 

    self.result(''); 

    var token = sessionStorage.getItem(tokenKey); 
    var headers = {}; 
    if (token) { 
     headers.Authorization = 'Bearer ' + token; 

    } 

    var data = new FormData(); 
    var file = self.imgPath(); 
    data.append('file', file); 

    $.ajax({ 
     type: 'POST', 
     url: '/api/Upload', 
     processData: false, 
     contentType: false, 
     headers: headers, 
     data:data 
    }).done(function (data) { 
     alert("hai"); 
     self.result(data.FileName); 
    }).fail(showError); 



} 

을 다음과 같이

<form data-bind="submit: uploadApi"> 

    <div> 
     <label for="caption">Image Caption</label> 
     <input name="caption" type="text" /> 
    </div> 
    <div> 
     <label for="image1">Image File</label> 
     <input name="image1" type="file" /> 
    </div> 
    <div> 
     <input type="submit" value="Submit" /> 
    </div> 
</form> 

내가 자바 스크립트 코드를 사용하고 다음과 같이 내 컨트롤러 코드는 다음과 같은 한

[Route("api/Upload")] 
    [HttpPost] 
    [MimeMultipart] 
    public async Task<FileUploadResult> Post() 
    { 
     var uploadPath = HttpContext.Current.Server.MapPath("~/Uploads"); 

     var multipartFormDataStreamProvider = new UploadMultipartFormProvider(uploadPath); 

     // Read the MIME multipart asynchronously 
     await Request.Content.ReadAsMultipartAsync(multipartFormDataStreamProvider); 

     string _localFileName = multipartFormDataStreamProvider 
      .FileData.Select(multiPartData => multiPartData.LocalFileName).FirstOrDefault(); 

     // Create response 
     return new FileUploadResult 
     { 
      LocalFilePath = _localFileName, 

      FileName = Path.GetFileName(_localFileName), 

      FileLength = new FileInfo(_localFileName).Length 
     }; 
    } 

컨트롤러 액션을 호출 할 수 자바 스크립트 (중단 점은 해고됩니다.) 그러나 폴더에 이미지를 업로드 할 수 없습니다실제로 제어 코드 나 컨트롤러 액션

$scope.startUploading = function ($files) { 
     //$files: an array of files selected 
     for (var i = 0; i < $files.length; i++) { 
      var $file = $files[i]; 
      alert($file); 
      (function (index) { 
       $scope.upload[index] = $upload.upload({ 
        url: "./api/fileupload", // webapi url 
        method: "POST", 
        file: $file 
       }).progress(function (evt) { 
       }).success(function (data, status, headers, config) { 
        // file is uploaded successfully 
        $scope.UploadedFiles.push({ FileName: data.FileName, FilePath: data.LocalFilePath, FileLength : data.FileLength }); 
       }).error(function (data, status, headers, config) { 
        console.log(data); 
       }); 
      })(i); 
     } 
    } 

어느 하나 AJAX 요청의 적절한 배치 있습니다 sugest 수 호출 다음 코드를 사용하여 각 js.in 각도 JS를 사용하여 다른 프로젝트에서 복사된다.

Answer 1

어제는 거의 비슷한 작업을 수행했습니다. 다음 코드는 도움이 될 수 있습니다

자바 스크립트

var formData = new FormData();    
var file = $('#fileUploader').prop('files'); 
formData.append("fileUploader", $("#fileUploader")[0].files[0]); 
formData.append("DocumentID", $("#hdnDoc").val()); 

$.ajax({ 
       type: "POST", 
       url: 'URL', 
       data: formData, 
       dataType: 'json', 
       contentType: false, 
       processData: false, 
       success: function (response) { 
       }) 

}) 

웹 API

public FileUploadResult Upload() 
{ 
    HttpPostedFileBase file = Request.Files[0]; 
    using (var reader = new System.IO.BinaryReader(file.InputStream)) 
    { 
     fileForDocumentStore.Document =  reader.ReadBytes(file.ContentLength); 
    } 

// you got file now, do your stuff. 
}