Пустые файлы, загруженные в Android. Исходный браузер.

Ответ 1

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

В конце концов я достиг решения, которое почти полностью прозрачно. Подходом был polyfill сломанный FormData с блобом, который добавляет данные в необходимый формат для multipart/form-data. Он переопределяет XHR send() версией, которая считывает blob в буфер, который отправляется в запросе.

Здесь главный код:

var
    // Android native browser uploads blobs as 0 bytes, so we need a test for that
    needsFormDataShim = (function () {
        var bCheck = ~navigator.userAgent.indexOf('Android')
                        && ~navigator.vendor.indexOf('Google')
                        && !~navigator.userAgent.indexOf('Chrome');

        return bCheck && navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534;
    })(),

    // Test for constructing of blobs using new Blob()
    blobConstruct = !!(function () {
        try { return new Blob(); } catch (e) {}
    })(),

    // Fallback to BlobBuilder (deprecated)
    XBlob = blobConstruct ? window.Blob : function (parts, opts) {
        var bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder);
        parts.forEach(function (p) {
            bb.append(p);
        });

        return bb.getBlob(opts ? opts.type : undefined);
    };

function FormDataShim () {
    var
        // Store a reference to this
        o = this,

        // Data to be sent
        parts = [],

        // Boundary parameter for separating the multipart values
        boundary = Array(21).join('-') + (+new Date() * (1e16*Math.random())).toString(36),

        // Store the current XHR send method so we can safely override it
        oldSend = XMLHttpRequest.prototype.send;

    this.append = function (name, value, filename) {
        parts.push('--' + boundary + '\nContent-Disposition: form-data; name="' + name + '"');

        if (value instanceof Blob) {
            parts.push('; filename="'+ (filename || 'blob') +'"\nContent-Type: ' + value.type + '\n\n');
            parts.push(value);
        }
        else {
            parts.push('\n\n' + value);
        }
        parts.push('\n');
    };

    // Override XHR send()
    XMLHttpRequest.prototype.send = function (val) {
        var fr,
            data,
            oXHR = this;

        if (val === o) {
            // Append the final boundary string
            parts.push('--' + boundary + '--');

            // Create the blob
            data = new XBlob(parts);

            // Set up and read the blob into an array to be sent
            fr = new FileReader();
            fr.onload = function () { oldSend.call(oXHR, fr.result); };
            fr.onerror = function (err) { throw err; };
            fr.readAsArrayBuffer(data);

            // Set the multipart content type and boudary
            this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
            XMLHttpRequest.prototype.send = oldSend;
        }
        else {
            oldSend.call(this, val);
        }
    };
}

И просто используйте его так, вызывая fd.append(name, value) как обычно после:

var fd = needsFormDataShim ? new FormDataShim() : new FormData();

Ответ 2

Как пробовать нарисовать его на холсте, используя матрицу, чтобы масштабировать ее до желаемого размера, а затем отправить ее на сервер с помощью canvas.toDataURL. Проверьте question.

Ответ 3

Я использую это, чтобы исправить проблему:

// not use blob, simply use key value
var form = new FormData();
// get you content type and raw data from data url
form.append( 'content_type', type);
form.append( 'content', raw);