Javascript 将blob发送到ASP.NET Web API

我尝试使用组件（）来裁剪图像，然后通过Web API将原始图像和裁剪后的版本发送到我的服务器。我这里的问题是，我以blob数组的形式获取数据（第一个元素是原始元素，第二个元素是裁剪的），我完全不知道如何发送该数据，或者如何将其转换为能够发送到我的api

我使用javascript函数而不是直接的服务调用来传递更多的参数，这是组件支持的，并且有文档记录

下面是函数：

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端的参数类型应该是什么？

您可以使用带有

enctype=“multipart/form data”

属性的

表单（您可以通过ajax提交该表单）

并在服务器端将其作为类型接收。

例如，取自：

我通常使用具有
enctype=“multipart/form data”
属性（您可以通过ajax提交）的
form
，并在服务器端将其作为
HttpPostedFileBase
类型接受，我已经实现了这样的组件，问题是，通过常规表单发布发送数据只允许我获取裁剪后的图像，而不是原始图像。在与该组件的作者进行了长时间的邮件交换（非常有帮助且反应迅速）之后，结果是我只能通过ajax实现我想要的…尽管如此，当您只需要裁剪版本时，这仍然是一个有效的解决方案。但是请注意，该文件随后作为json对象传递，带有base64图像数据，而不是HttpPostedFileBase。您可以通过ajax提交表单，并且可以使用
属性的
输入类型
file
，这将允许用户选择多个文件。我以前做过这件事，从他们的文档来看效果很好，这正是他们要求你在客户端做的事情：我知道，但是组件的构建方式是，当你使用表单post时，你只会得到裁剪过的图像，数据作为json传递（该组件将文件输入转换为包含所述json的隐藏输入）。在大多数情况下，当您只需要裁剪版本时，这是非常好的，但当您尝试同时获得这两个版本时，就不是了。
<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");
}

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