web apiにファイルをアップロードできません

Question

私はweb api project.inを作成しています。これはトークンベースの認証を正常に実行しました。私はウェブ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> 

次私はjavascriptのコードを使用しているしていると、コントローラのアクションを呼び出すことができる

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

Javascriptを次のように私のコントローラコードがある

（ブレークポイントが点滅します）。ただし、画像をフォルダにアップロードすることはできませんは、実際には、コントローラコードは、いずれかのAJAXリクエストに適切な配置をsugestことができ、私はコントローラのアクション

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

を呼び出すために、次のコードを使用角js.in角度JSを使用する別のプロジェクトからコピーされます。

Answer 1

昨日はほぼ同じような仕事をしました。次のコードは役に立つかもしれません：

はJavaScript

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