Chrome WebKitBlobBuilder không thêm dữ liệu

Question

Tôi đang triển khai một số tính năng tải tệp lên thông qua yêu cầu ajax. Tôi muốn có thể gửi nhiều tập tin trong một cuộc gọi ajax, vì vậy tôi quyết định sử dụng FormData.

Tôi đã cố thêm chuỗi dữ liệu nhị phân của mình trực tiếp vào FormData (và nó hoạt động), nhưng Nội dung-Bố trí không có thuộc tính tên tệp: Nội dung-Bố trí: biểu mẫu-dữ liệu; name = "file1"

w3c nói rằng tôi cần phải nối thêm một đối tượng blob đến formdata có thuộc tính đó (hoặc để có thể thiết lập nó với thuộc tính thứ 3 của FormData.append())

tôi viết đoạn mã sau:

function uploadAsBinary() { 
    var xhr = new XMLHttpRequest(); 
    var fd = new FormData(); 

    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder; 
    var bb = new window.BlobBuilder(); 
    bb.append("this is my binary content"); 
    var blob = bb.getBlob("text/plain"); 

    fd.append("file1", blob, "file1"); 

    xhr.open("POST", "/mb/0/", false); 
    xhr.send(fd); 
} 

nó hoạt động hoàn toàn tốt đẹp với firefox, nhưng với google chrome (v16 và v17), yêu cầu tải trọng là một formdata không có nội dung trong đó:

------WebKitFormBoundaryVkgESMAGtmPMlPZ7 
Content-Disposition: form-data; name="file1"; filename="file1" 
Content-Type: text/plain 


------WebKitFormBoundaryVkgESMAGtmPMlPZ7-- 

Tôi cũng đã cố gắng để điền vào các đốm màu thông qua một ArrayBuffer, cùng một kết quả. Tôi đã lướt web được 2 ngày rồi, tôi đã không tìm thấy câu trả lời nào. Tôi đã tìm thấy một vấn đề mở trên Android (http://code.google.com/p/android/issues/detail?id=22441) nhưng nó có vẻ khá chết.

Đây có phải là sự cố chrome thực sự không? Có ai đó có một đầu mối về điều này, hay tôi nên mở một vấn đề trên tracker chromium?

Thx để được trợ giúp của bạn!

Answer 1

Đối với bất cứ ai tìm kiếm một giải pháp ở đây, vấn đề là chuyển sang Blob() chứ không phải là BlobBuilder() như explained here

BlobBuilder():

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || 
       window.MozBlobBuilder || window.MSBlobBuilder; 
window.URL = window.URL || window.webkitURL; 

var bb = new BlobBuilder(); 
bb.append('body { color: red; }'); 
var blob = bb.getBlob('text/css'); 

var link = document.createElement('link'); 
link.rel = 'stylesheet'; 
link.href = window.URL.createObjectURL(blob); 

document.body.appendChild(link); 

Blob():

window.URL = window.URL || window.webkitURL; 

var blob = new Blob(['body { color: red; }'], {type: 'text/css'}); 

var link = document.createElement('link'); 
link.rel = 'stylesheet'; 
link.href = window.URL.createObjectURL(blob); 
document.body.appendChild(link); 

Answer 2

tl; dr Công cụ phát triển Chrome xuất hiện để nén dữ liệu tệp từ bản xem trước tải trọng dữ liệu. Chuyển đổi từ BlobBuilder sang Blob giải quyết vấn đề, nhưng bản xem trước của tải trọng vẫn sẽ không hiển thị dữ liệu tệp; nó sẽ trông giống như những gì bạn đăng (dường như trống rỗng).

Triệu chứng bạn mô tả là lừa đảo. Tôi chạy vào một vấn đề tương tự (hóa ra là do quá tải không chính xác của Content-Type, nhưng tôi digress).

Khi sự cố của tôi được giải quyết, tôi nhận thấy rằng Công cụ phát triển Chrome đang hiển thị dữ liệu khóa/giá trị đơn giản nhưng không hiển thị dữ liệu tệp. Khi tải lên một tập tin lớn, tôi sẽ nhận được một cái gì đó như thế này:

------WebKitFormBoundaryHyzYwSEV4FAfvi02 
Content-Disposition: form-data; name="uploadType" 

media 
------WebKitFormBoundaryHyzYwSEV4FAfvi02 
Content-Disposition: form-data; name="fileupload"; filename="blob" 
Content-Type: application/zip 


------WebKitFormBoundaryHyzYwSEV4FAfvi02-- 

Thông báo "plain" dữ liệu uploadType=media xuất hiện, trong khi dữ liệu tập tin thì không. Cách duy nhất tôi xác nhận rằng tệp được tải lên chính xác (ngoài việc nhận được mã thành công từ máy chủ) bằng cách tìm trong tab Mạng của Công cụ phát triển Chrome theo tiêu đề yêu cầu sau khi yêu cầu hoàn tất. Nó cho thấy content-length: 1023235, lớn hơn nhiều so với tải trọng tệp được cho là rỗng.