將blob發送到ASP.NET Web API

我試圖使用組件（slim image cropper）來裁剪圖像，然後通過Web API將原始圖像和裁剪版本發送到我的服務器。我的問題在於，我將數據作爲Blob數組獲取（第一個元素是原始數據，第二個元素是裁剪的），我完全不知道如何發送該數據，或者如何將其轉換爲能夠將其發送給我API。將blob發送到ASP.NET Web 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端應該是什麼參數類型？

來源

2017-08-29 ZipionLive

我通常以'form'具有'ENCTYPE =「多部分/格式數據」'屬性（可以通過AJAX提交）做到這一點，在服務器側接受它作爲一個'HttpPostedFileBase'型https://msdn.microsoft.com/en-us/library/system.web.httppostedfilebase(v=vs.110).aspx –

您可以使用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" />

來源

2017-08-29 22:03:29

我已經實現了這樣的組件，問題是發送數據與常規窗體張貼只允許我得到裁剪的圖像，而不是原來的。經過與組件的作者進行長時間的郵件交換（非常有幫助和反應性btw），結果是我只能通過ajax實現我想要的效果... – ZipionLive

仍然是upvoted，因爲當你只需要裁剪版本時，它是一個有效的解決方案。但請注意，該文件然後作爲json對象與base64圖像數據傳遞，而不是HttpPostedFileBase。 – ZipionLive

您可以通過ajax提交表單，並且可以通過'multiple'屬性擁有'file'類型的'input'，這將允許用戶選擇多個文件。我之前完成了這項工作，它的效果很好 –

將blob發送到ASP.NET Web API

回答

相關問題