Firebase は、さまざまなサービスを提供する Backend as a Service (BAAS) です。サービスには、認証、クラウド ストレージ、ホイスティングなどが含まれます。基本的に、開発者は認証やデータベースなどをモバイルまたは Web アプリケーションに簡単に統合できます。
このチュートリアルでは、Firebase のクラウド ストレージについて説明します。 Firebase Cloud Storage に画像をアップロードし、どこでも使用できるように画像の URL を取得する方法を学びます。
ユーザーは、以下の手順に従って Firebase アカウントを設定し、シングルページ ウェブ アプリケーションと統合する必要があります。
ステップ 1 - まず、Firebase ウェブサイトにアクセスしてアカウントを作成します。
ステップ 2 - 次に、https://console.firebase.google.com/u/0/ に移動して Firebase コンソールを開きます。
ステップ 3 - [プロジェクトの作成] ボタンをクリックして、新しいプロジェクトの作成を開始します。
ステップ 4 - ここにプロジェクト名を追加し、利用規約に同意して、[続行] ボタンをクリックします。
ステップ 5 - 希望の場所を選択し、利用規約に同意して、[プロジェクトの作成] ボタンをクリックします。
ステップ 6 - 次のページにリダイレクトされます。ここで、「ストレージ」カード要素をクリックします。その後、「開始」ボタンをクリックしてください。
ステップ 7 - ここで、テスト モードで起動するか実稼働モードで起動するかを選択します。ここではテストするために「テスト」モードを選択し、「次へ」ボタンをクリックします。
ステップ 8 - 次に、最寄りの希望の保存場所を選択し、「完了」ボタンをクリックします。デフォルトのバケットの作成が開始されます。
ステップ 9 - バケットを作成すると、次のページにリダイレクトされます。この例で使用するバケット ID をここからコピーします。
ステップ 10 - 次に、[ルール] タブに移動してルールを編集します。その後、次のコードを追加して、すべてのユーザーが認証なしで画像ファイルをアップロードできるようにします。
バケットから画像をアップロードするための Firebase プロジェクトの設定が完了しました。
＃＃＃例＃＃＃ユーザーは以下の手順に従う必要があります。
- シングル ページ サイトで Firebase を使用するには、 タグに Firebase CDN を追加します。
- HTML に進行状況バーを追加します。このバーの進行状況は、画像のアップロード率に基づいて JavaScript から更新されます。また、ファイルをアップロードするための入力を追加します。これは、ユーザーがファイルをアップロードするときに uplaodFile() 関数を呼び出す必要があります。また、空の「src」値を持つ「img」要素を追加します。ダウンロード URL を取得した後、「src」値を初期化します。
- JavaScript では、ユーザーがファイルをアップロードするときにファイルにアクセスし、Date() オブジェクトを使用して一意のファイル名を「fileName」変数に保存します。
- 次に、Firebase Storage を初期化します。
- 次に、バケット内の適切な場所への画像ファイルのアップロードを開始し、アップロードされた割合に基づいて進行状況の値をアップロードします。
- アップロードが完了したら、getDownalodURL() メソッドを使用して画像の URL を取得し、それを、画面に表示される画像の「src」属性値に設定します。ウェブページ。
ユーザーは、JavaScript を使用して画像を Firebase Cloud Storage にアップロードし、画像の URL を取得する方法を学習しました。ライブアプリでは、Firebase を使用するときに、ユーザーのプロフィール写真やその他の画像のアップロードされた画像の URL を取得すると便利です。
さらに、Firebase を使用すると、開発者は画像をアップロードして URL を取得するためのセットアップを非常に高速に行うことができます。
以上がFirebaseのURL取得の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
