Nuxt JS を使用して画像を Firebase に正常にアップロードする
<p>Firebase にデータを送信および取得する Web アプリケーションを開発しています。Nuxt JS アプリケーションを Firebase に接続するように完全に設定できましたが、画像ファイルとテキスト ファイルを混合して送信するときに問題が発生します。 </p>
<p>画像とテキスト ファイルの両方を Firebase に送信するには、Nuxt JS プロジェクトを設定するにはどうすればよいですか? </p>
<p>これは私のフォーム テンプレートです。 </p>
<pre class="brush:php;toolbar:false;">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></pre></p>
