使用Nuxt JS將圖片成功上傳至Firebase
<p>我正在開發一個從Firebase提交和檢索資料的網路應用程序，我已經能夠完全配置我的Nuxt JS應用程式與Firebase連接，但問題出現在當我想要提交混合圖像檔案和文字檔案時。 </p>
<p>如何設定我的Nuxt JS專案以將圖像和文字檔案都提交到Firebase？ </p>
<p>這是我的表單範本。 </p>
<pre class="brush:php;toolbar:false;">Index.js.
<template>
<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">標題</label>
<input v-model ="postDetails.title" type="text" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-whiteorder bounded-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">內容</label>
<textarea v-model ="postDetails.description" type="textarea" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border rounded-lg dark:2 text-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>
<select name="tags" id="" class="block w-full px-6 py-4 mt-2">
<option v-for ="obj in postDetails.tag" :value="obj" class="text-black text-lg py-5">{{obj}}</option>
</select>
</div>
<標籤=“密碼” class=“block text-sm text-gray-800 dark:text-gray-200”>特色圖片;
<輸入 v-model =“postDetails.featured_image”類型=“文字” class =「塊w-full px-6 py-4 mt-2 text-gray-700 bg-white邊框圓形-lg dark：bg-gray-800 dark：text-gray-300 dark：border-gray-600焦點：邊框-藍色-400 深色：焦點：邊框-藍色-300 焦點：環-藍色-300 焦點：輪廓-無焦點：環焦點：環-不透明度-40” >>
<標籤=“密碼” class="block text-sm text-gray-800 dark:text-gray-200">創建於
<輸入 v-model =“postDetails.created_at”類型=“文字” class =「塊w-full px-6 py-4 mt-2 text-gray-700 bg-white邊框圓形-lg dark：bg-gray-800 dark：text-gray-300 dark：border-gray-600焦點：邊框-藍色-400 深色：焦點：邊框-藍色-300 焦點：環-藍色-300 焦點：輪廓-無焦點：環焦點：環-不透明度-40” >>
<按鈕類別=“w-full py-4 px-6文字-sm字體-中追蹤-寬文字-白色大寫過渡顏色持續時間-300變換bg-gray-800圓形懸停：bg-gray-700焦點:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50>>
發布
</按鈕>
</表格>
</範本>
<腳本>
導出預設值{
名稱：“儀表板”，
數據（）{
返回{
貼文詳情：{
標題：“”，
內容：“”，
標籤：[
“商業”，
“娛樂”，
「新聞」,
“科學”，
“體育”，
“技術”，
],
特色圖像：“”，
創建於：“”，
}
}
},
}
</劇本></pre></p>
