JavaScript Blob Tải lên với FormData

Question

Tôi gặp sự cố khi tải lên một blob được tạo bằng javascript vào máy chủ của tôi. Ý tưởng cơ bản là một người dùng tải lên một hình ảnh và trong javascript tôi trung tâm cắt hình ảnh và rút gọn nó trước khi truyền.

Thao tác hình ảnh đang hoạt động tốt, nhưng bản tải lên không hoạt động chính xác. Đây là mã mà không được tải lên và chuyển đổi từ vải để 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; 
} 

Máy chủ tuyên bố rằng không có tập tin đã được tải lên, và khi tôi sử dụng chrome để kiểm tra theo yêu cầu, tôi thấy các tải trọng theo yêu cầu như:

------WebKitFormBoundaryyzYbm61DKgS09tpB 
Content-Disposition: form-data; name="file" 

[object FormData] 
------WebKitFormBoundaryyzYbm61DKgS09tpB-- 

Ngược lại với các tải trọng của một hình thức được nộp cùng với input type="file"

------WebKitFormBoundaryUOn3WXb7pKLmOxRZ 
Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg" 
Content-Type: image/jpeg 


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ-- 

Vì vậy, có vẻ với tôi như XMLHttpRequest chỉ được tải lên kết quả của cal ling blob.toString()

Có ai biết tôi đang làm gì sai ở đây không? Có cách nào tốt hơn tôi nên sử dụng?

Answer 1

Bạn có một lỗi đánh máy trong hàm uploadCanvasData nó nên đọc

formData.append("file", blob); 

đọc mã của bạn một cách cẩn thận hơn!

Answer 2

function dataURItoBlob(dataURI) { 
// convert base64/URLEncoded data component to raw binary data held in a string 
var byteString; 
if (dataURI.split(',')[0].indexOf('base64') >= 0) 
    byteString = atob(dataURI.split(',')[1]); 
else 
    byteString = unescape(dataURI.split(',')[1]); 

// separate out the mime component 
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 

// write the bytes of the string to a typed array 
var ia = new Uint8Array(byteString.length); 
for (var i = 0; i < byteString.length; i++) { 
    ia[i] = byteString.charCodeAt(i); 
} 

return new Blob([ia], {type:mimeString}); 
} 

tạo XMLHttpRequest

let uriPost ="active.php"; 
let xhrPost =new XMLHttpRequest(); 

sau đó thực hiện điều này dễ dàng

var dataURL = canvas.toDataURL('image/jpeg', 0.5); 
var blob = dataURItoBlob(dataURL); 
var fd = new FormData(document.forms[0]); 
fd.append("canvasImage", blob); 

Tôi hy vọng you'l làm tất cả điều này trong một chức năng mà bạn sẽ tạo ra tự của bạn sau đó gọi hàm