Android 4.0浏览器FormData.append(Blob)兼容性问题解决方案咨询

这个问题我之前帮开发者排查过好几次，Android 4.0的WebView和系统浏览器确实存在Blob通过FormData发送时内容为空的兼容性坑，下面是几个经过验证的可行解决办法：

1. 将Blob转为Data URL发送，后端解码还原 #

Android 4.0的XHR对Blob的处理有缺陷，但对字符串类型的Data URL支持较好。我们可以把Blob转成base64编码的Data URL，存入FormData后发送，后端再解码还原成文件。

前端示例代码：

// 假设img_to_send是你的Blob对象
const fileReader = new FileReader();
fileReader.onload = function(e) {
  const formData = new FormData();
  // 把Data URL存入FormData，同时指定文件名和MIME类型
  formData.append('uploaded_image', e.target.result, 'user_upload.jpg');
  
  // 发送XHR请求
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/your-upload-endpoint', true);
  xhr.onload = function() {
    // 处理响应
    console.log('上传完成:', xhr.responseText);
  };
  xhr.send(formData);
};
// 读取Blob为Data URL
fileReader.readAsDataURL(img_to_send);

后端处理示例（以Node.js为例）：

// 解析请求中的Data URL
const dataUrl = req.body.uploaded_image;
// 分离Data URL的元信息和base64内容
const [metaPart, base64Data] = dataUrl.split(',');
// 解码base64为Buffer
const fileBuffer = Buffer.from(base64Data, 'base64');
// 后续可以将Buffer写入文件或存储到云存储

2. 兼容使用BlobBuilder创建Blob #

Android 4.0的浏览器可能支持旧版的BlobBuilder接口（而非标准的Blob构造函数），用它来创建Blob对象，再加入FormData，可能绕过原生Blob的处理bug。

前端兼容代码：

// 封装兼容的Blob创建函数
function createCompatibleBlob(data, mimeType) {
  if (window.BlobBuilder) {
    const builder = new BlobBuilder();
    builder.append(data);
    return builder.getBlob(mimeType);
  } else if (window.WebKitBlobBuilder) {
    // 针对WebKit内核的兼容（Android 4.0用的是WebKit）
    const builder = new WebKitBlobBuilder();
    builder.append(data);
    return builder.getBlob(mimeType);
  } else {
    // fallback到标准Blob构造函数
    return new Blob([data], { type: mimeType });
  }
}

// 使用兼容函数创建Blob，再加入FormData
const compatibleBlob = createCompatibleBlob(img_to_send, 'image/jpeg');
const formData = new FormData();
formData.append('uploaded_image', compatibleBlob, 'user_upload.jpg');

// 发送XHR请求（和之前的逻辑一致）
const xhr = new XMLHttpRequest();
xhr.open('POST', '/your-upload-endpoint', true);
xhr.send(formData);

3. 降级使用File对象（如果可行） #

如果你的img_to_send是从<input type="file">元素获取的原始File对象，直接使用File而非转成Blob，Android 4.0对File的FormData支持要稳定很多。如果是通过Canvas等生成的Blob，也可以尝试将Blob转为File对象（部分老浏览器可能支持）：

// 尝试将Blob转为File（Android 4.0可能支持）
const imgFile = new File([img_to_send], 'user_upload.jpg', { type: 'image/jpeg' });
const formData = new FormData();
formData.append('uploaded_image', imgFile);

// 发送请求...

4. 用iframe模拟表单提交（终极兼容方案） #

如果以上方法都不生效，可以用最传统的iframe表单提交方式，完全绕过XHR的限制：

<!-- 页面中添加隐藏的表单和iframe -->
<form id="uploadForm" action="/your-upload-endpoint" method="POST" enctype="multipart/form-data" target="uploadFrame">
  <input type="file" id="hiddenFileInput" style="display: none;">
</form>
<iframe id="uploadFrame" name="uploadFrame" style="display: none;"></iframe>

// 把Blob转成File后，赋值给隐藏的file输入
const imgFile = new File([img_to_send], 'user_upload.jpg', { type: 'image/jpeg' });
const fileInput = document.getElementById('hiddenFileInput');
// 这里需要用DataTransfer来模拟文件输入（部分老浏览器支持）
const dataTransfer = new DataTransfer();
dataTransfer.items.add(imgFile);
fileInput.files = dataTransfer.files;

// 提交表单
document.getElementById('uploadForm').submit();

// 监听iframe的加载事件，获取响应
document.getElementById('uploadFrame').onload = function() {
  const response = this.contentDocument.body.textContent;
  console.log('上传完成:', response);
};

注意事项 #

• 测试时尽量用真实的Android 4.0设备，模拟器的WebView环境可能和真实设备有差异；
• 后端要根据你选择的上传方式，对应调整解析逻辑（比如Data URL需要解码，普通文件上传用multipart解析）；
• 如果你的应用对Android 4.0的用户占比极低，也可以考虑提示用户升级浏览器，但这显然不是最优解。

内容的提问来源于stack exchange，提问作者Hassan Baig