Chrome WebKitBlobBuilder не добавляет данные - PullRequest
5 голосов
/ 21 марта 2012

Я использую функцию загрузки файлов через ajax-запрос. Я хотел бы иметь возможность отправлять несколько файлов за один вызов ajax, поэтому я решил использовать FormData.

Я попытался добавить строку двоичных данных непосредственно в FormData (и это работает), но Content-Disposition не имеет атрибута имени файла: Content-Disposition: форма-данные; Name = "file1"

w3c говорит, что мне нужно добавить объект блоба к формданным, чтобы иметь этот атрибут (или иметь возможность установить его с 3-м атрибутом FormData.append ())

Я написал следующий код:

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);
}

Он отлично работает с Firefox, но с Google Chrome (v16 и v17) полезная нагрузка запроса представляет собой данные формы без содержимого:

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


------WebKitFormBoundaryVkgESMAGtmPMlPZ7--

Я также пытался заполнить блоб через ArrayBuffer, тот же результат. Я занимаюсь веб-серфингом уже 2 дня, но не нашел ответа. Я обнаружил открытую проблему на Android (http://code.google.com/p/android/issues/detail?id=22441), но она кажется довольно мертвой.

Это реальная проблема с хромом? У кого-нибудь есть подсказки по этому поводу, или я должен открыть вопрос о трекере хрома?

Спасибо за помощь!

Ответы [ 2 ]

1 голос
/ 25 октября 2012

Для тех, кто ищет решение здесь, проблема заключается в переключении на Blob (), а не BlobBuilder (), как объяснено здесь

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);
0 голосов
/ 10 августа 2015

tl; dr Появятся инструменты разработки Chrome для обрезки данных файла из предварительного просмотра полезных данных.Переключение с BlobBuilder на Blob решает проблему, но при предварительном просмотре полезной нагрузки данные файла не отображаются;это будет выглядеть так же, как то, что вы опубликовали (очевидно, пусто).

Симптом, который вы описываете, обманчив.Я столкнулся с подобной проблемой (оказалось, что она была вызвана неправильной перегрузкой Content-Type, но я отступил).

Когда моя проблема была решена, я заметил, что Инструменты разработки Chrome показывали простой ключ / значениеданные, но не данные файла.При загрузке большого файла я получаю что-то вроде этого:

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

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


------WebKitFormBoundaryHyzYwSEV4FAfvi02--

Обратите внимание, что «простые» данные uploadType=media отображаются, а данные файла - нет.Единственный способ подтвердить, что файл был загружен правильно (кроме, в конечном итоге, получения кода успеха с сервера), - это просмотреть на вкладке «Сеть» в Chrome Development Tools заголовки запроса после завершения запроса .Он показал content-length: 1023235, намного больше, чем предполагает предположительно пустая полезная нагрузка файла.

...