如何使用 CDN 和版本 9.5.0 將圖像上傳到 Firebase?

酷人34

我正在嘗試使用 Firebase 存儲通過 JavaScript 上傳圖像。但是,我找不到使用 CDN ( <script type="module">)在 9.5.0 版本上上傳文件的方法

我搜索了文檔,找到了“storageRef.put”,但是,它Uncaught TypeError: storage.put is not a function在控制台上給了我

有人能幫我嗎?JavaScript 代碼:

import { getStorage, ref } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-storage.js";

const storage = getStorage(app);
const storageRef = ref(storage);

function submit() {
    const file = document.getElementById("file").files[0];

    storageRef.put(file);
}

document.getElementById("submit").addEventListener("click", submit);

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/8.2.2/firebase-app.min.js"></script>
<input type="file" id="file"><br><br>
<button id="submit">Enviar</button>
拉姆吉特

在從 Firebase v8(命名空間)到 v9(模塊化)的更改中,他們對 SDK 進行了大修。版本 9 並不是 v8 的替代品。

在您的代碼中,我看到 HTML 中的 v8 和 javascript 中的 v9。

所以只使用v9,他們文檔中的例子

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js";
 import { getStorage, ref, uploadBytes  } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-storage.js";


  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };

  // Initialize Firebase
  const firebaseApp = initializeApp(firebaseConfig);
    
  // Get a reference to the storage service, which is used to create references in your storage bucket
  const storage = getStorage(firebaseApp);
  const storageRef = ref(storage, 'some-child');
    
  // 'file' comes from the Blob or File API
  const file = document.getElementById("file").files[0];
  uploadBytes(storageRef, file).then((snapshot) => {
    console.log('Uploaded a blob or file!');
  });
</script>

請注意,您可以將 v9 與 v8 語法一起使用,但您也需要引入 compat 包。您可以查看他們的升級指南以獲取更多信息。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用 reactjs 將圖像上傳到 Firebase web v9

使用 Laravel 8 將圖像上傳到存儲和數據庫時出現的問題

如何將從firebase存儲上傳的圖像保存到firestore數據庫中的currentUser

如何舍入到最接近的0、5或9整数

Node.js - 如何將圖像上傳到 Backblaze b2?

如何將數據上傳到壓縮圖像中?

使用 Microsoft.SharePoint.Client 將圖像上傳到共享點文件夾

使用 JavaScript 將相機圖像上傳到服務器

使用 JavaFX 上傳和顯示圖像

無法使用 Flask 和 JQuery 上傳圖像

h5ai在CDN上使用?

將圖像同時上傳到 firebase 存儲和文本輸入到 firestore 時出錯

從 ReactJS 上傳圖片到 Firebase v9 存儲

如何仅在A到Z和0到9的情况下使用ORD和CHR?

如何在heroku django上上傳和使用圖像

如何將圖像從文件路徑上傳到服務器改造 kotlin android

如何在 mvc5 中更新/刪除上傳的圖像

如何從雲函數將圖像存儲在 Firebase 存儲上

使用 Firebase v9 從網站上傳文件到 Firebase 存儲

Firebase 版本 9 使用多個條件 where 子句

如何使用 CDN 和负载均衡器进行文件版本控制?

如何避免从 CDN 捆绑 Vuetify 和使用?

如何將上傳的圖像定向到我想要的文件

我正在嘗試使用 PHP 將圖像上傳到 mysql 數據庫,但它沒有通過

Firebase 托管与存储 - 使用 CDN 提供图像

创建 postDict 后如何从 Firebase 快照中检索和使用数据;我得到“0\0\0”

如何使用 HTML5 和 Javascript 读取 Firebase 数据?

VB.NET从0舍入到4-> 0从5舍入到9-> 1

ASP.Net MVC 5-使用捆绑的JavaScript和CSS部署单独的CDN站点