发送JSON+图片Blob至服务器时FormData缺失Blob字段问题

我之前也踩过类似的坑，结合你的描述，给你梳理几个大概率的原因和对应的解决办法：

1. 异步操作时机错误（最常见原因） #

你的toBlobPromise是异步方法，如果在Promise还没完成时就去构造并发送FormData，此时Blob还没生成，自然会出现字段缺失的情况。比如错误写法可能是这样：

const canvas = document.getElementById('myCanvas');
const formData = new FormData();

// 错误：发起异步获取Blob，但没等结果返回就发送请求
canvas.toBlobPromise('image/png').then(blob => {
  formData.append('image', blob, 'canvas-shot.png');
});

// 这里formData里还没有image字段，直接发送会缺失
fetch('/api/upload', { method: 'POST', body: formData });

正确做法：把FormData的构造和请求发送逻辑放在Promise的回调里，确保Blob生成后再执行：

const canvas = document.getElementById('myCanvas');
canvas.toBlobPromise('image/png', 0.9)
  .then(blob => {
    const formData = new FormData();
    // 添加Blob字段，记得指定文件名（第三个参数）
    formData.append('image', blob, 'canvas-shot.png');
    // 同时添加JSON数据，需要转成字符串
    formData.append('meta', JSON.stringify({ userId: 123, desc: 'canvas截图' }));
    
    // 现在发送请求才是有效的
    return fetch('/api/upload', { method: 'POST', body: formData });
  })
  .then(res => res.json())
  .catch(err => console.error('上传失败:', err));

2. Blob对象有效性问题 #

虽然控制台能看到Blob，但有可能Canvas没有绘制内容、尺寸为0，导致生成的Blob是空对象。可以在添加到FormData前做个校验：

canvas.toBlobPromise('image/png')
  .then(blob => {
    if (!blob || blob.size === 0) {
      throw new Error('生成的Blob为空，请检查Canvas是否有有效内容');
    }
    // 后续FormData操作
  })
  .catch(err => console.error(err));

3. 你的toBlobPromise封装可以优化下 #

其实不用额外存that，用箭头函数就能直接绑定当前Canvas的上下文，代码更简洁：

HTMLCanvasElement.prototype.toBlobPromise = function(mimeType = 'image/png', qualityArgument) {
  return new Promise(resolve => {
    this.toBlob(resolve, mimeType, qualityArgument);
  });
};

（注：toBlob如果生成失败会传入null，后续在then里判断即可）

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