使用Canvas压缩图片后上传Firebase Storage，文件格式变为application/octet-stream的问题求助

我之前也踩过异步处理的坑，你的核心问题出在压缩函数的异步逻辑没有正确处理，导致上传的不是预期的图片Blob/File对象，Firebase只能默认使用application/octet-stream格式。下面是具体分析和修复方案：

问题根源 #

你的compressImg函数里，canvas.toBlob是异步执行的——它会在画布处理完成后才调用回调函数生成Blob，但你在函数末尾直接同步返回了output，这时候output还没有被赋值（依然是undefined）。当你把这个未定义的对象传给Firebase的put方法时，它无法识别正确的文件类型，就会默认使用application/octet-stream。

而之前没有压缩函数时，你上传的是原始的File对象，它本身携带了正确的MIME类型和文件名，所以Firebase能正常识别。

修复方案 #

把compressImg改成返回Promise的异步函数，这样你就能用await等待压缩完成，拿到正确的、带有正确类型的文件对象。

修改后的压缩函数 #

function compressImg(file) {
  return new Promise((resolve, reject) => {
    const MAX_WIDTH = 768;
    const MAX_HEIGHT = 1024;
    const MIME_TYPE = "image/jpeg";
    const QUALITY = 0.7;
    const blobURL = URL.createObjectURL(file);
    const img = new Image();

    img.src = blobURL;
    img.onerror = function() {
      URL.revokeObjectURL(this.src);
      toastr["error"]("Cannot load image", "Error");
      console.log("Cannot load image");
      reject(new Error("Failed to load image for compression"));
    };

    img.onload = function() {
      URL.revokeObjectURL(this.src);
      const [newWidth, newHeight] = calculateSize(img, MAX_WIDTH, MAX_HEIGHT);
      const canvas = document.createElement("canvas");
      canvas.width = newWidth;
      canvas.height = newHeight;
      const ctx = canvas.getContext("2d");
      
      ctx.drawImage(img, 0, 0, newWidth, newHeight);
      canvas.toBlob(
        (blob) => {
          if (!blob) {
            reject(new Error("Failed to generate blob from canvas"));
            return;
          }
          // 使用File对象包装Blob，确保带有正确的文件名和MIME类型
          const compressedFile = new File([blob], 'tempName.jpeg', { 
            type: MIME_TYPE,
            lastModified: Date.now()
          });
          resolve(compressedFile);
        },
        MIME_TYPE,
        QUALITY
      );
    };
  });
}

修改上传代码 #

因为现在compressImg返回的是Promise，所以需要用await等待压缩完成：

var compressedImg = await compressImg(imageList[i]);
await ref.put(compressedImg);

额外说明 #

1. 使用File对象而不是直接修改Blob的属性：Blob的name和lastModified并非标准属性，而File继承自Blob，且拥有这些标准元数据，Firebase能更可靠地识别它的类型和文件名。
2. 增加了错误处理：通过Promise的reject抛出错误，方便你在调用时捕获处理（比如用try/catch包裹上传逻辑）。

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