Firebase Storage上传图片报错：预期Blob/File类型问题解决

Hey there! Let's sort out that frustrating upload error you're seeing with Firebase Storage. The message is clear—Firebase's put() method requires a Blob, File, or Uint8Array as input, but whatever you're passing right now doesn't fit that bill. Let's break down the most common scenarios and how to convert your image data into the correct format.

Scenario 1: You have a Base64-encoded image string #

If you're working with a base64 string (like from canvas.toDataURL() or a frontend image processing step), you'll need to convert it to a Blob first. Here's a reusable function to do that:

function base64ToBlob(base64String) {
  // Split the base64 string into its MIME type and data components
  const parts = base64String.split(',');
  const mime = parts[0].match(/:(.*?);/)[1];
  const byteString = atob(parts[1]);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(arrayBuffer);

  // Populate the Uint8Array with byte values
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }

  return new Blob([arrayBuffer], { type: mime });
}

// Usage example
const base64Image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";
const imageBlob = base64ToBlob(base64Image);

// Upload to Firebase Storage
const storageRef = firebase.storage().ref('images/my-custom-image.png');
storageRef.put(imageBlob)
  .then(snapshot => {
    console.log('Upload successful!');
    return snapshot.ref.getDownloadURL();
  })
  .then(downloadUrl => {
    console.log('Your image URL:', downloadUrl);
  })
  .catch(error => {
    console.error('Upload failed:', error);
  });

Scenario 2: You're uploading an image from a Canvas #

If you're generating an image via a canvas element, skip using toDataURL()—use toBlob() directly to get a Blob ready for upload:

const canvas = document.getElementById('my-drawing-canvas');

// Convert canvas to Blob and upload
canvas.toBlob(function(blob) {
  const storageRef = firebase.storage().ref('images/canvas-drawing.png');
  storageRef.put(blob)
    .then(snapshot => {
      console.log('Canvas image uploaded!');
      return snapshot.ref.getDownloadURL();
    })
    .then(downloadUrl => {
      console.log('Canvas image URL:', downloadUrl);
    });
}, 'image/png'); // Specify your desired MIME type (e.g., image/jpeg for JPGs)

Scenario 3: You're fetching an image from a remote URL #

If you need to upload an image from another website, use fetch() to grab it as a Blob directly:

fetch('https://example.com/your-remote-image.jpg')
  .then(response => response.blob()) // Convert response to Blob
  .then(blob => {
    const storageRef = firebase.storage().ref('images/remote-image.jpg');
    return storageRef.put(blob);
  })
  .then(snapshot => {
    console.log('Remote image uploaded successfully!');
    return snapshot.ref.getDownloadURL();
  })
  .then(downloadUrl => {
    console.log('Remote image URL:', downloadUrl);
  })
  .catch(error => {
    console.error('Error during upload:', error);
  });

Scenario 4: You're accidentally passing a file path instead of a File object #

If you're using an <input type="file"> element, make sure you're grabbing the File object from the files array—not the value property (which is just a fake path string). Here's the correct approach:

<input type="file" id="image-uploader" accept="image/*">

const fileInput = document.getElementById('image-uploader');

fileInput.addEventListener('change', (event) => {
  const selectedFile = event.target.files[0]; // This is a File object (subclass of Blob)
  if (!selectedFile) return;

  const storageRef = firebase.storage().ref(`images/${selectedFile.name}`);
  storageRef.put(selectedFile)
    .then(snapshot => {
      console.log('File uploaded!');
      return snapshot.ref.getDownloadURL();
    })
    .then(downloadUrl => {
      console.log('Your image is available at:', downloadUrl);
    })
    .catch(error => {
      console.error('Upload error:', error);
    });
});

Quick Note: Uint8Array is also supported #

If you have raw image data in a Uint8Array (like from a binary file reader), you can pass that directly to put() without converting it to a Blob—Firebase handles it natively.

The key takeaway here is to ensure your image data is in one of the formats Firebase expects: Blob, File, or Uint8Array. Pick the conversion method that matches your current data type, and your uploads should start working smoothly.

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