如何在Next.js中把DALL·E 2生成的图片从外部URL上传至Firebase Storage？

你直接把DALL·E返回的图片URL字符串传给uploadBytes，Firebase无法识别这是图片文件，默认将其标记为application/octet-stream（通用字节流类型）。要解决这个问题，得先把图片URL转换成Blob对象，上传时明确指定图片的MIME类型。

DALL·E生成的图片格式为PNG，我们需要先通过fetch获取图片资源并转为Blob，再上传到Firebase Storage时指定contentType: 'image/png'。

修改uploadPost函数中的上传逻辑：

const uploadPost = async () => {
  if (loading) return;
  setLoading(true);

  const docRef = await addDoc(collection(db, 'posts'), {
    username: session.user.username,
    caption: captionRef.current.value,
    profileImg: session.user.image,
    timestamp: serverTimestamp()
  })

  console.log("New doc added with ID", docRef.id);
  console.log(selectedFile)

  // 将图片URL转为Blob对象
  const imageResponse = await fetch(selectedFile);
  const imageBlob = await imageResponse.blob();

  // 上传时指定图片MIME类型
  const imageRef = ref(storage, `posts/${docRef.id}/image`)
  await uploadBytes(imageRef, imageBlob, { contentType: 'image/png' }).then(async snapshot => {
    const downloadURL = await getDownloadURL(imageRef)
    await updateDoc(doc(db, 'posts', docRef.id), {
      image: downloadURL
    })
  })

  setLoading(false)
  setSelectedFile(null)
}

• 如果后续DALL·E返回其他格式的图片（比如JPEG），只需把contentType改成对应的类型（如image/jpeg）即可。
• 可以给fetch转换Blob的步骤添加try/catch块，处理网络异常，避免上传流程意外中断。

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