将blob发送到ASP.NET Web API

Question

我试图使用组件（slim image cropper）来裁剪图像，然后通过Web API将原始图像和裁剪版本发送到我的服务器。我的问题在于，我将数据作为Blob数组获取（第一个元素是原始数据，第二个元素是裁剪的），我完全不知道如何发送该数据，或者如何将其转换为能够将其发送给我API。

我使用javascript函数而不是直接服务调用来传递更多参数，由组件支持并记录为here。

这里的功能：

var uploadImage = function (formdata, progress, success, failure) { 
    var originalArray; 
    var croppedArray; 

    var apiCall = function (original, cropped) { 
     var params = { 
      name: formdata[0].name, 
      original, 
      cropped, 
      id: $('hidId').val() 
     } 
     $.getJSON('/api/Test/UploadImage', params, function (response) { 
      if (response) { 
       if (response.Success == true) { 
        success('Upload réussi') 
       } else { 
        failure('Upload échoué') 
       } 
      } else { 
       failure('Pas de réponse de l\'API') 
      } 
     }); 
    }; 

    var originalReader = new FileReader(); 
    originalReader.onloadend = function() { 
     originalArray = originalReader.result; 
     if (originalArray != null && croppedArray != null) 
      apiCall(originalArray, croppedArray); 
    }; 
    originalReader.readAsArrayBuffer(formdata[0]); 

    var croppedReader = new FileReader(); 
    croppedReader.onloadend = function() { 
     croppedArray = croppedReader.result; 
     if (originalArray != null && croppedArray != null) 
      apiCall(originalArray, croppedArray); 
    }; 
    croppedReader.readAsArrayBuffer(formdata[1]); 
} 

我知道它必须寻找粗略的，但我没有经验，这种情况下，在所有。当我到达$ .getJSON（...）行时，控制台中出现404错误，显示只传递了“name”参数。

以防万一它是相关的，这是我的API方法签名：

public IHttpActionResult UploadImages(string name, byte[] original, byte[] cropped, Guid id) 
{ 
    ... 
} 

我怎么能解决这个问题并发送图片？ api端应该是什么参数类型？

Answer 1

您可以使用form与enctype="multipart/form-data"属性（你可以通过AJAX提交该表格）
并得到它作为HttpPostedFileBase类型的服务器端。
对于来自here采取例子：

<form action="" method="post" enctype="multipart/form-data"> 

    <label for="file">Filename:</label> 
    <input type="file" name="file" id="file" /> 

    <input type="submit" /> 
</form> 

[HttpPost] 
public ActionResult Index(HttpPostedFileBase file) { 

    if (file.ContentLength > 0) { 
    var fileName = Path.GetFileName(file.FileName); 
    var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName); 
    file.SaveAs(path); 
    } 

    return RedirectToAction("Index"); 
} 

编辑
对于您可以使用输入的属性multiple="multiple"
和服务器端接受HttpPostedFileBase集合像IEnumerable<HttpPostedFileBase>多个文件。

<input type="file" multiple="multiple" name="files" id="files" />