Blob 和 Blobbuilder 或 Blobbuilder 在 android 本机浏览器上的问题有什么区别

Question

问题与What's the difference between BlobBuilder and the new Blob constructor?不重复

我正在做网络应用程序。上传图片我使用Blob，以防万一BlobBuilder。 Blob 运行良好，但 Blob 在 android 原生浏览器 上不起作用，android 原生浏览器使用 BlobBuilder。我预计，Blob 和 BlobBuilder 返回相同的 blob，但他们没有。这是我的代码：

base64toBlob: function(b64Data, contentType, sliceSize) {
  var BlobBuilder, blob, byteArray, byteCharacters, byteNumbers, charCodeFromCharacter, err, posIndex;

  if (contentType == null) {
    contentType = '';
  }
  if (sliceSize == null) {
    sliceSize = 1024;
  }
  posIndex = b64Data.indexOf('base64,');
  if (posIndex !== -1) {
    b64Data = b64Data.substring(posIndex + 7);
  }
  charCodeFromCharacter = function(c) {
    return c.charCodeAt(0);
  };
  byteCharacters = atob(b64Data.replace(/\s/g, ''));
  byteNumbers = Array.prototype.map.call(byteCharacters, charCodeFromCharacter);
  byteArray = new Uint8Array(byteNumbers);
  try {
    blob = new Blob([byteArray.buffer], {
      type: contentType
    });
    return blob;
  } catch (_error) {
    err = _error;
    BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
    blob = new BlobBuilder();
    blob.append(byteArray.buffer);
    return blob.getBlob(contentType);
  }
}

我在发送请求时记录了日志

blobImg = base64toBlob(base64Data, imageType);
alert(JSON.stringify(blobImg));
// alert shows {"type": "image/jpeg", "size": 10251 } when blob worked
// alert shows {"type": "image/jpeg", "size": 27822 } when blobbuilder worked
ajaxRequest.send(blobImg);

我尝试在所有浏览器上上传同一张图片。在 Chrome 和其他浏览器上，我从日志 {"type": "image/jpeg", "size": 10251 } 获取并请求发送成功，但在 android 本机浏览器上，我得到 {"type": "image/jpeg", "size": 27822 } 并且请求失败，状态码为 0。在 android 浏览器上工作 catch 部分（我猜，这意味着 Android 原生浏览器不支持 Blob）我在 android 4.1.2 中测试过。我从谷歌没有发现任何关于这个问题的信息。如果有人帮助我，我会很高兴！

Answer 1

注意你传入的内容的区别：

try {
    blob = new Blob([byteArray.buffer], { // use of .buffer
      type: contentType
    });
    return blob;
} catch (_error) {
    err = _error;
    BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
    blob = new BlobBuilder();
    blob.append(byteArray); // just uses the raw array
    return blob.getBlob(contentType);
}

从MDN documentation 到BlobBuilder.append：

将指定 JavaScript 对象的内容附加到 Blob 正在建设。如果您指定的值不是 Blob、ArrayBuffer 或 String，在附加到 斑点。

byteArray 不是ArrayBuffer 类型，因此它可能被强制转换为字符串。您可以通过将其转换为字符串并检查其长度来自己确认这一点。要修复它，只需在 catch 块中使用 byteArray.buffer。

有趣的是，Blob constructor 似乎直接接受了 ArrayBufferView，而您的 Uint8Array 则符合此条件。这可能意味着在这种情况下您实际上并不需要 .buffer，尽管我对 API 不够熟悉，因此无法自信地说。

Answer 2

它适用于我们的情况，我不知道，它是否适合您。

base64toBlob: (b64Data, contentType = '', needArrBuffer) ->
    posIndex = b64Data.indexOf 'base64,'
    if posIndex isnt -1
        b64Data = b64Data.substring posIndex + 7

    charCodeFromCharacter = ( c ) ->
        c.charCodeAt( 0 )

    byteCharacters = b64Data
    b64Data = b64Data.replace(/\s/g, '')
    try
        byteCharacters = atob?(b64Data)
        byteCharacters ?= Base64.decode(b64Data)
    catch err

    byteNumbers = Array.prototype.map.call(byteCharacters,
            charCodeFromCharacter)
    byteArray = new Uint8Array(byteNumbers)

    try
        new Blob [byteArray.buffer], type: contentType
    catch err
        if needArrBuffer
            # Android browser cannot send Blob by XHR, so we use ArrayBuffer instead of Blob
            return byteArray.buffer
        Util.log 'Warning: No native Blob supported! ' + err.message
        BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder
        blob = new BlobBuilder()
        blob.append(byteArray.buffer)
        blob.getBlob(contentType)


blobImg = base64toBlob(base64Data, imageType, true);
ajaxRequest.send(blobImg);