У меня проблема с загрузкой blob, созданной в javascript на моем сервере. Основная идея заключается в том, что пользователь загружает изображение, а в javascript я обрезаю изображение и уменьшаю его до передачи.
Работа с изображениями работает нормально, но сама загрузка не работает. Вот код, который делает загрузку и преобразование с холста в blob
function uploadCanvasData()
{
var canvas = $('#ImageDisplay').get(0);
var dataUrl = canvas.toDataURL("image/jpeg");
var blob = dataURItoBlob(dataUrl);
var formData = new FormData();
formData.append("file", formData);
var request = new XMLHttpRequest();
request.onload = completeRequest;
request.open("POST", "IdentifyFood");
request.send(formData);
}
function dataURItoBlob(dataURI)
{
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++)
{
ia[i] = byteString.charCodeAt(i);
}
var bb = new Blob([ab], { "type": mimeString });
return bb;
}
Сервер утверждает, что файлы не были загружены, и когда я использую хром для проверки запроса, я вижу полезную нагрузку запроса как:
------WebKitFormBoundaryyzYbm61DKgS09tpB
Content-Disposition: form-data; name="file"
[object FormData]
------WebKitFormBoundaryyzYbm61DKgS09tpB--
В отличие от полезной нагрузки формы, представленной input type="file"
------WebKitFormBoundaryUOn3WXb7pKLmOxRZ
Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--
Итак, мне кажется, что XMLHttpRequest просто загружает результат вызова blob.toString()
Кто-нибудь знает, что я делаю неправильно здесь? Есть ли лучший подход, который я должен использовать?