Nuxt JS を使用して画像を Firebase に正常にアップロードする

Question

Firebase にデータを送信および取得する Web アプリケーションを開発しています。Nuxt JS アプリケーションを Firebase に接続するように完全に設定できましたが、画像ファイルとテキスト ファイルを混合して送信するときに問題が発生します。

画像とテキスト ファイルの両方を Firebase に送信するには、Nuxt JS プロジェクトを設定するにはどうすればよいですか?

これは私のフォーム テンプレートです。

Index.js。

<テンプレート>

    <div class="w-full max-w-lg p-6 m-auto mx-auto dark:bg-gray-800 font-body">
        <h1 class="text-3xl font-semibold text-center text-gray-700 dark:text-white">投稿を作成</h1>
    
        <form class="space-y-8">
            <div>
                <label for="username" class="block text-sm text-gray-800 dark:text-gray-200">title</label>
                <input v-model ="postDetails.title" type="text" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white borderrounded-lg dark: bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" />
            </div>
    
            <div class="">
           
                <label for="password" class="block text-sm text-gray-800 dark:text-gray-200">content</label>
                <textarea v-model ="postDetails.description" type="textarea" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white borderrounded-lg dark: bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" > </textarea>
            </div>

            <div class="">
           
           <label for="password" class="block text-sm text-gray-800 dark:text-gray-200">label</label>

           <select name="tags" id="" class="block w-full px-6 py-4 mt-2">
            <option v-for ="postDetails.tag の obj" :value="obj" class="text-black text-lg py-5">{{obj}}</option>
           
        </選択>

       </div>

       <div class="">
           
           <ラベル=「パスワード」 class="block text-sm text-gray-800 dark:text-gray-200">特色图片</label>
           <input v-model ="postDetails.featured_image" type="テキスト" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white borderrounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600フォーカス:ボーダーブルー-400 ダーク:フォーカス:ボーダーブルー-300 フォーカス:リングブルー-300 フォーカス:アウトラインなし フォーカス:リングフォーカス:リング不透明度-40" />
       </div>

       <div class="">
           
           <ラベル=「パスワード」 class="block text-sm text-gray-800 dark:text-gray-200"></label> から作成されました。
           <input v-model ="postDetails.created_at" type="テキスト" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white borderrounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600フォーカス:ボーダーブルー-400 ダーク:フォーカス:ボーダーブルー-300 フォーカス:リングブルー-300 フォーカス:アウトラインなし フォーカス:リングフォーカス:リング不透明度-40" />
       </div>



    
            <div class="">
                <button class="w-full py-4 px-6 text-sm font-medium tracking-wide text-white大文字にするtransition-colorsduration-300transform bg-gray-800rounded hover:bg-gray-700 focus :outline-none focus:ring focus:ring-grey-300 focus:ring-opacity-50''>
                   発行
                </ボタン>
            </div>
        </フォーム>
    
   
    </div>
    
    </テンプレート>
    
    <スクリプト>
    
デフォルトのエクスポート {
名前: 「ダッシュボード」、

データ（）{

    戻る{

    投稿詳細:{
        
        タイトル: ""、
        コンテンツ: ""、
        鬼ごっこ：[
            
            「商业」、
            「娱乐」、
            「新闻」、
            「科学」、
            「体育」、
            「技术」、
            ]、
        注目の画像: ""、
        作成場所: ""、
     
    }


    }
}、


    }
    </script>

Answer 1

すでに述べたように、Firebase に接続できます。次に、ファイルを Firebase に送信するには、この ドキュメント-1 を参照してください。これには、firebase.js からエクスポートしたバケットを index.js にインポートする必要があることが記載されています。 ＃＃＃真ん中。この手順を完了したら、アップロードするファイルを選択するためのフロントエンドを構築する必要があります。 Nuxt JS を使用して Firebase にファイルをアップロードする段階的なプロセスが明確に説明されている上記のドキュメントを参照してください。

Nuxt JS を使用して Firebase に画像を送信する方法を明確に説明しているこの

Document-2 も参照できます。