如何使用本地模拟器将图片上传到 Firebase 并在网页上使用?

huangapple go评论81阅读模式
英文:

how to upload firebase images to web using local emulator?

问题

I'm trying to upload some images to a firebase storage bucket,
and trying to run the code locally in the firebase emulator.

With most examples I'll get an error like:

  "Unhandled error FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. 
(app/no-options).    at initializeApp

I tried this: https://firebase.google.com/docs/admin/setup

const defaultApp = initializeApp({ credential: applicationDefault() })

Which may or not be working.
I think this creates an authed app (maybe?) but if I later use

const storage = getStorage() I get the same auth error.

So next, I tried using the defaultApp for next steps, like:

const storage = defaultApp.storage();

that doesn't error, but it returns something different from getStorage, that I can't seem to use for other needed things like getting a ref

如何使用本地模拟器将图片上传到 Firebase 并在网页上使用?

as per examples https://firebase.google.com/docs/storage/web/upload-files

So it's not clear how to upload files to firebase from the local simulator.

my full function looks like this:


import cuid from "cuid";
import {
  getStorage,
  ref,
  uploadBytes,
  uploadBytesResumable,
  getDownloadURL
} from "firebase/storage";
import { admin, defaultApp } from '../utils/firebaseInit'

export function saveToBucket(url: string): string {
  const normalStorage = getStorage() // Gets a FirebaseStorage instance for the given Firebase app. but NOT AUTHED
  const defaultStorage = defaultApp.storage(); // Gets the default FirebaseStorage instance.
  const storageRef = ref(normalStorage)
  const bucketPath = `personas-out/img-${cuid()}.jpg`

  const bucket = defaultStorage.bucket();
  // const bucketRef = bucket.ref(); // Property 'ref' does not exist on type 'Bucket'.ts(2339)

  const metadata = {
    contentType: 'image/jpeg'
  };

  const imageRef = ref(storageRef, bucketPath);
  const file = new File([url], bucketPath, {
    type: "image/jpeg",
  });
  // will happen in the background?
  uploadBytesResumable(imageRef, file, metadata)
    .then((snapshot: any) => {
      console.log('Uploaded', snapshot);
    });

  return bucketPath
}


英文:

I'm trying to upload some images to a firebase storage bucket,
and trying to run the code locally in the firebase emulator.

With most examples I'll get an error like:

  "Unhandled error FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. 
(app/no-options).    at initializeApp

I tried this: https://firebase.google.com/docs/admin/setup

const defaultApp = initializeApp({ credential: applicationDefault() })

Which may or not be working.
I think this creates an authed app (maybe?) but if I later use

const storage = getStorage() I get the same auth error.

So next, I tried using the defaultApp for next steps, like:

const storage = defaultApp.storage();

that doesn't error, but it returns something different from getStorage, that I can't seem to use for other needed things like getting a ref

如何使用本地模拟器将图片上传到 Firebase 并在网页上使用?

as per examples https://firebase.google.com/docs/storage/web/upload-files

So it's not clear how to upload files to firebase from the local simulator.

my full function looks like this:


import cuid from "cuid";
import {
  getStorage,
  ref,
  uploadBytes,
  uploadBytesResumable,
  getDownloadURL
} from "firebase/storage";
import { admin, defaultApp } from '../utils/firebaseInit'

export function saveToBucket(url: string): string {
  const normalStorage = getStorage() // Gets a FirebaseStorage instance for the given Firebase app. but NOT AUTHED
  const defaultStorage = defaultApp.storage(); // Gets the default FirebaseStorage instance.
  const storageRef = ref(normalStorage)
  const bucketPath = `personas-out/img-${cuid()}.jpg`

  const bucket = defaultStorage.bucket();
  // const bucketRef = bucket.ref(); // Property 'ref' does not exist on type 'Bucket'.ts(2339)

  const metadata = {
    contentType: 'image/jpeg'
  };

  const imageRef = ref(storageRef, bucketPath);
  const file = new File([url], bucketPath, {
    type: "image/jpeg",
  });
  // will happen in the background?
  uploadBytesResumable(imageRef, file, metadata)
    .then((snapshot: any) => {
      console.log('Uploaded', snapshot);
    });

  return bucketPath
}


答案1

得分: 1

你不应该在Node.js代码中使用Firebase客户端SDK(firebase/storage)。客户端SDK仅适用于浏览器。对于在后端运行的Node.js代码(这是在部署到Cloud Functions时所做的操作),应该使用Firebase Admin SDK。它所提供的存储API本质上是对Google Cloud Storage Node.js库的薄包装。

英文:

You're not supposed to use the Firebase client SDK (firebase/storage) in nodejs code. The client SDKs are meant to work in a browser only. For nodejs code that runs on a backend (which is what you're doing when you deploy to Cloud Functions), you should use the Firebase Admin SDK. The API it exposes for Storage is essentially a thin wrapper around the Google Cloud Storage nodejs library.

huangapple
  • 本文由 发表于 2023年1月8日 02:51:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/75042959.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定