使用Nuxt JS將圖片成功上傳至Firebase
P粉885562567
P粉885562567 2023-08-31 20:43:16
0
1
517
<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>
P粉885562567
P粉885562567

全部回覆(1)
P粉714890053

正如您已經提到的,您能夠連接到Firebase。然後,要將文件提交到Firebase,您可以參考此文件-1,其中指出您需要將從firebase.js匯出的儲存桶匯入到index.js 中。完成此步驟後,您需要建立前端以選擇要上傳的檔案。您可以參考上述提到的文檔,其中清楚描述了使用Nuxt JS將文件上傳到Firebase的逐步過程。

也可以參考此文件-2,其中清楚地解釋如何使用Nuxt JS將映像提交到Firebase。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!