đăng Blob với FormData qua jQuery.ajax

Question

Tôi đã nhìn thấy câu hỏi này hỏi nhiều lần, nhưng càng nhiều càng tốt tôi cố gắng, tôi vẫn thấy không có kết quả:

Làm thế nào tôi có thể thêm một Blob để tạo dữ liệu và POST nó qua jquery?

var reader = FileReader(); 
reader.readAsBinaryString(f); 
reader.onload = function() { 
    var slice = reader.result.slice(0,100, {type: "application/octet-stream"}); 

    var formdata = new FormData(); 
    formdata.append("blobData", slice); // I have verified via console.log(slice) that this has data 
    formdata.append("blobName", "Photo"); 

    send(formdata); 
} 

function send(data) { 
    $.ajax({ 
     url: "/upload", 
     type: "POST", 
     data: data,  
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
} 

Tất cả khóa/giá trị không phải blob đều có trong yêu cầu và thậm chí cả khóa của blob ... nhưng không phải là dữ liệu blob.

Điều thú vị là, khi tôi đăng bài sử dụng Firefox thay vì Chrome, tôi nhận được một chút dữ liệu lên đó .. nhưng không nhiều (điều này nên thể lên tới 2 MB giá trị của dữ liệu ... đó là 7 byte)

Answer 1

Gần đây, tôi đã gặp sự cố chính xác này và có giải pháp.

Vấn đề cốt lõi là giá trị của reader.result được chuyển đến reader.onload bởi readAsBinaryString là một chuỗi chứ không phải một đốm màu. Nghe có vẻ thực sự nhưng tôi cũng cho rằng tôi đã làm việc với một đốm màu. Vì các đối tượng String và Blob đều có một phương thức slice, biến số slice, trong khi thiết lập với dữ liệu giống như dữ liệu nhị phân, vẫn chỉ là một chuỗi. Phương thức String.slice() hoạt động chính xác giống như phương thức Blob.slice() và chỉ bỏ qua tham số thứ ba, đó là lý do tại sao bạn không nhận thấy điều gì đang thực sự xảy ra.

Theo FormData spec bất kỳ giá trị nào không phải là đối tượng Blob hoặc Tệp được chuyển đổi thành chuỗi. Có vẻ như chuỗi slice đang bị cắt ngắn ở ký tự không phải ASCII đầu tiên (tôi chỉ đoán đúng lý do chính xác, nhưng điểm quan trọng là chuỗi chắc chắn bị cắt bớt khi nó được thêm vào formdata).

Giải pháp là để chuyển đổi reader.result vào một blob đầu tiên:

reader.onload = function() { 
    var blob = new Blob([reader.result]), 
     slice = blob.slice(0,100, {type: "application/octet-stream"}); 

    var formdata = new FormData(); 
    formdata.append("blobData", slice); 
    formdata.append("blobName", "Photo"); 

    send(formdata); 
} 

(Mảng là một yêu cầu của các nhà xây dựng Blob).

Bây giờ slice là một đốm màu, vì phương thức Blob.slice() trả về đối tượng Blob và có thể được thêm vào formdata mà không bị xáo trộn bằng chuyển đổi chuỗi.