3.4は、ファジーベースV 9 -クラウドストレージとの深刻な取得:ファイルをアップロード

18124 ワード
javascript webdev firebase beginners テキストリンク
導入
サーバーホストへのファイルアップロードは、一般的なウェブアプリケーション要件です.たとえば、ブログのアプリのユーザーが自分の投稿にビデオファイルを追加できるようにすることがあります.
以前は、どのようにFirebasedeploy 手順は、サーバーに静的資産をアップロードするために使用することができます.しかし、ここではブログのユーザーのフォトアルバムのファイルのような動的資産について話しています.花火基地deploy このような状況では使用されません.この要件へのGoogleの答えは「Firebase Storage」と呼ばれているサービスです.
あなたが観察されたならば、あなたが最初にFireBaseコンソールを見たとき、あなたはこれを見つけたかもしれません.その時、注意は認証、firestoreとホスティングに集中しました、しかし、あなたが「記憶」とラベルをつけられるサービスを見つけたかもしれない左側のコラムの「ビルド」タブのリストに含まれました.
プロジェクトのコンソールストレージページを開き、「ストレージ」タブを見つけてクリックします.
クラウドストレージは、実際にGoogleクラウドシステムの巨大な一部です-あなたはCloud Storage for Firebase . 私はこのポストでその能力のほんの一部を使用しているでしょうが、すぐにこれは堅牢で、スケーラブルで安全なストレージのためのすべての要件を満たすために頼ることができる機能であることがわかります.
クラウド・ストレージstorage buckets . これはグーグル自身がシステムを説明したことです.

Buckets are the basic containers that hold your data. Everything that you store in Cloud Storage must be contained in a bucket. You can use buckets to organize your data and control access to your data, but unlike directories and folders, you cannot nest buckets. While there is no limit to the number of buckets you can have in a project or location, there are limits to the rate you can create or delete buckets.

When you create a bucket, you give it a globally-unique name and a geographic location where the bucket and its contents are stored. The name and location of the bucket cannot be changed after creation, though you can delete and re-create the bucket to achieve a similar result. There are also optional bucket settings that you can configure during bucket creation and change later.


コンソールのストレージページを開くのは初めて、Googleはプロジェクトに割り当てられているデフォルトの「バケツ」を初期化するよう要求します(プロジェクトの設定を開き、「Storagebucket」を探している場合は、この名前を見ることができます).
初期化は一般的に非常に簡単ですが、テストモードやプロダクションモードでプロジェクトを起動するかどうかを尋ねられると、少しスローされることがあります.ただし、プロジェクトのFirestore設定を初期化したときに似たようなものがあったことを覚えておいてください.この段階では、“test”-を選択してください.適切な地理的な場所も選択-どこか合理的に近いあなたの目標にする必要があります.このすべてを終えたら、ストレージページは次のようになります.

ファイルをクラウドにアップロードする
以前のポストは、イラストとして“買い物リスト”アプリケーションを使用します.これは、ユーザーがログインし、購入意図のリストを作成することができました.私は今、あなたは彼らが自分のアカウントにプロファイルのアイコンを追加できるようにするために機能を追加する方法を示すつもりです.
ところで、クラウドストレージを使用するのではなく、これに対する1つのアプローチは、アップロードされたデータをFirestoreコレクションに格納することかもしれません.だから、例えば、あなたはuserAccounts コレクションキーピングオンuserEmail そして、エンコードされた文字列のようにフォーマットされたデータフィールドにアップロードされたイメージファイルを保存しようとします.しかし、これは動作しないでしょう.なぜなら、Firestore文書の最大サイズは1 MBであり、画像は一般的にこれよりもはるかに大きいでしょう.それで、計画は「Useremail」に基づくファイル名でダイナミックにクラウドストレージで作成されるファイルにアップロードする必要があります.
上記のスクリーンショットはデフォルトfir-expts-app.appspot.com に割り当てられたバケツfir-expts-app ShoppingListプロジェクトのプロジェクト.ここで直接プロファイルアイコンファイルを保存するか、特にこの目的のために新しいバケツを作成するべきですか?コンソールは確かにバケツを作成する機能を私に提供しますが、これらのバケットの概念のGoogleの説明から、これらはローカルストレージ内のフォルダとして自由に扱われるものではないことを思い出します.システムは、しかし、私が自由にバケツの中で「フォルダ」をつくるのを許します、そして、これはGoogleが行くのを好む方向であるようですFolders .
私は今、ユーザーがローカルストレージからプロファイルグラフィックファイルを選択し、それをアップロードできるようにJavaScriptを記述する必要があります.あなたはおそらく私は実際には、提案された拡張機能は、単にばかげているとして、元の買い物リストのアプリケーションにこれを組み込むつもりはないと思われるでしょう.いずれにしても、私が説明しようとしているテクニックを曖昧にする.ですから、この例を自分で試してみると、以下のコードは元のインデックスを上書きすることを意図しています.HTMLとインデックス.JSファイルfirexptsapp プロジェクト
デモインデックスの本文です.HTML `

<body style="text-align: center;">

    <input type="file" id="fileitem" accept="image/png, .txt, .pdf">
    <img id="imageitem" style="display: none; max-width: 20%; margin: 10vh auto 5vh auto;">

    <script src="packed_index.js" type="module"></script>
</body>
HTMLファイルの入力要素に慣れていない場合は、Mozillaのドキュメントをチェックしてください <input type="file"> - これらは、ファイル選択ウィンドウを起動し、DOMにユーザーの選択を格納する非常にきちんとした方法を提供します.
ここで対応するindex.js :
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { getStorage, ref, uploadBytes } from 'firebase/storage';

const firebaseConfig = {
    apiKey: "AIzaSyAPJ44X28c .... 6FnKK5vQje6qM",
    authDomain: "fir-expts-app.firebaseapp.com",
    projectId: "fir-expts-app",
    storageBucket: "fir-expts-app.appspot.com",
    messagingSenderId: "1070731254062",
    appId: "1:10707312540 ..... 61bd95caeacdbc2bf",
    measurementId: "G-Q87QDR1F9T"
};
const firebaseApp = initializeApp(firebaseConfig);

const provider = new GoogleAuthProvider();
const auth = getAuth();

const userEmail = "[email protected]"

const storage = getStorage();
const storageRef = ref(storage, 'userProfileIcons/'+ userEmail);

window.onload = function () {
    document.getElementById('fileitem').onchange = function () { uploadFile() };
}

function uploadFile() {
    var file = document.getElementById('fileitem').files[0];
    uploadBytes(storageRef, file).then((snapshot) => {
        alert('Successful upload');
    });
}
The uploadFile() 関数はindex.js 上記のコードは、index.html 's fileitem フィールド変更、ユーザーがアップロード用のファイルを選択したことを示す信号.その前に、あなたは私が初期化して、以前と同様にWebAppを認可したが、それからAから輸入される新しい機能のカップルを使用したのを見るでしょうfirebase/storage "ストレージ参照"を作成するモジュールです.これらは私がアップロードするファイルを終了する場所を示します.ここでは、ハードコーディングによって少し騙されたuserEmail フィールド[email protected] ) webappに.あなたが実際にGoogleログインを使用しているならば、これはユーザーの電子メールを供給するのに用いられます.
The uploadFile() 関数自体はとても簡単です.HTML入力フィールドのDOMエントリから選択されたファイルの詳細をコピーするだけですfiles[0] 選択されたファイルのリストの最初の詳細を取得します-この場合、1つだけですstorageRef SDKのパラメータとしてアップロードターゲットを指定するフィールドuploadBytes 関数.これが完了すると、ブラウザ画面に警告メッセージが表示されます.
これを操作に入れるには、単に私のbuild_for_development.ps1 スクリプトファイルを選択し、その内容を選択してF 8キーを押します.一旦コードが首尾よく「ウェブ詰められました」(一旦私がモジュラーV 9 Firebase SDKを使用しているので、必須である)が配備されたならば、私は供給されたURLでWebAppを起動することができますhttps://fir-expts-app.web.app この場合).私がそれからランダムを選ぶならば.png ファイルは、ブラウザが予想される'成功したアップロード'警告メッセージに対応する必要があります.そして、私がfirestoreコンソールの記憶ページをリフレッシュするならば、私はそれを見なければなりませんuserProfileIcons フォルダが作成され、ローカルファイルがアップロードされました[email protected] . コンソールのエントリをクリックすることで正しいファイルであることを確認することができます.
私は実際に作成する必要はありませんuserProfileIcons フォルダと私は再び別のソースファイルを選択するWebAppを実行すると、ターゲットは単に上書きされます.
クラウドストレージのファイルの参照
ローカルファイルのクラウドコピーを正常に作成しましたが、WebAppが実際にこれを使用して画面上にユーザーのプロファイルアイコンを表示する方法を示していません.
これは驚くほど簡単です.もう一つの雲記憶機能getDownloadURL() "ストレージ参照"パラメータを受け取り、url . それは、それをプラグインする単純な問題ですsrc 資産<img> タグとは、このようにブラウザの画面にクラウドストレージファイルを表示します.場合によっては、これらを保存するのに役に立つ/必要になるかもしれませんurl としてstring FireStoreコレクション内のどこかのフィールド.
私がこれを成し遂げるために加える必要があるコードは、ここにあります.まず、HTMLファイルの本文では、次のように付け加えました.
    <img id="imageitem" style="display: none; max-width: 20%; margin: 10vh auto 0 auto;">
とインデックスで.jsファイルをアップロードしました.
function uploadFile() {
    var file = document.getElementById('fileitem').files[0];
    uploadBytes(storageRef, file).then((snapshot) => {
        alert('Successful upload');
        getDownloadURL(storageRef)
            .then((url) => {
                document.getElementById('imageitem').src = url;
                document.getElementById('imageitem').style.display = "block";
            })
    });
}
いったんビルドスクリプトを再起動すると、WebAppはローカルソースファイルのクラウドストレージコピーを表示します.

この基本的なテーマで遊ぶことができるバリエーションがたくさんあります.入力タグがブラウザのDOMで作成するファイルオブジェクトには、多くの有用なプロパティがあります.例えば、document.getElementById('fileitem').files[0].type; PDFファイルを検出することができます(タイプは' application/pdf ).window.open(url, "_blank"); 新しいブラウザタブの下にファイルのクラウドストレージコピーを表示します.
ストレージルール
1つの最終的なしわは、アイロンをかけることです.プロジェクトAPIキーは本質的に公開されているので、Googleクラウドストレージは、Firestoreドキュメントセキュリティに関して以前に見たのと同じような“規則”配列で保護する必要があります.
FireBaseコンソールのストレージページの「規則」タブをクリックして、現在強制的に規則を見ることができます.FIRのための記憶装置を初期化したので、「テスト」モードでアプリプロジェクトは以下のように見えます
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if
          request.time < timestamp.date(2022, 1, 17);
    }
  }
}
これらは、「実行日が2022年1月22日の前にある間、誰でも何でもするのを許します」と言います.私は2021年12月18日に私のイニシアゼを走らせました、それで、Googleは私自身を分類させるために私に1ヵ月を与えていました.この日付の後、私が規則を変えたならば、私はものを修理するまで、彼らは完全にアクセスを拒否します.ただ、今のところ、“テスト”の設定は良いです.
このシリーズの他のポスト
あなたがこのポストを面白く見つけて、Firebaseについてより多くを見つけることを望むならば、あなたはそれがこのシリーズに見えることを価値があるとわかるかもしれません.
mysql joinクエリー結果セットによる関連付け
カテゴリ:ハウツーとスタイル