Berjaya memuat naik imej ke Firebase menggunakan Nuxt JS

Question

Saya sedang membangunkan aplikasi web yang menyerahkan dan mendapatkan semula data daripada Firebase, saya telah dapat mengkonfigurasi sepenuhnya aplikasi Nuxt JS saya untuk menyambung dengan Firebase, tetapi masalah timbul apabila saya ingin menyerahkan fail imej bercampur dan fail teks .

Bagaimanakah saya boleh menyediakan projek Nuxt JS saya untuk menyerahkan kedua-dua imej dan fail teks ke Firebase?

Ini adalah templat borang saya.

Index.js.

<template>

    <div class="w-maks penuh-w-lg p-6 m-auto mx-auto dark:bg-gray-800 font-body">
        <h1 class="teks-3xl fon-semibold teks-pusat teks-kelabu-700 gelap:teks-putih">Buat siaran</h1>
    
        <kelas bentuk="ruang-y-8">
            <div>
                <label untuk="nama pengguna" kelas="sekat teks-sm teks-kelabu-800 gelap:teks-kelabu-200">tajuk</label>
                <masukan v-model ="postDetails.title" type="text" class="block w-full px-6 py-4 mt-2 text-grey-700 bg-white border rounded-lg dark: bg-kelabu-800 gelap:teks-kelabu-300 gelap:kelabu-sempadan-600 fokus:border-biru-400 gelap:fokus:border-biru-300 fokus:cincin-biru-300 fokus:garis besar-tiada fokus:cincin fokus:ring-opacity-40"
            </div>
    
            <div class="">
           
                <label untuk="kata laluan" class="sekat teks-sm teks-kelabu-800 gelap:teks-kelabu-200">kandungan</label>
                <textarea v-model ="postDetails.description" type="textarea"class="blok w-full px-6 py-4 mt-2 text-grey-700 bg-white border bulat-lg gelap: bg-kelabu-800 gelap:teks-kelabu-300 gelap:kelabu-sempadan-600 fokus:border-biru-400 gelap:fokus:border-biru-300 fokus:cincin-biru-300 fokus:garis besar-tiada fokus:cincin fokus:ring-opacity-40" </textarea>
            </div>

            <div class="">
           
           <label untuk="kata laluan" class="sekat teks-sm teks-kelabu-800 gelap:teks-kelabu-200">label</label>

           <pilih nama="tag" id=""kelas="sekat w-px-6 py-4 mt-2">
            <pilihan v-untuk ="obj dalam postDetails.tag" :value="obj"class="teks-hitam-lg py-5">{{obj}}</option>
           
        </select>

       </div>

       <div class="">
           
           <label untuk="kata laluan" class="sekat teks-sm teks-kelabu-800 gelap:teks-kelabu-200">特色图片</label>
           <masukan v-model ="postDetails.featured_image" type="teks" class="sekat w-px penuh-6 py-4 mt-2 teks-kelabu-700 bg-sempadan putih dibulatkan-lg gelap:bg-kelabu-800 gelap:teks-kelabu-300 gelap:sempadan-kelabu-600 fokus: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 untuk="kata laluan" class="sekat teks-sm teks-kelabu-800 gelap:teks-kelabu-200">创建于</label>
           <masukan v-model ="postDetails.created_at" type="teks" class="sekat w-px penuh-6 py-4 mt-2 text-grey-700 bg-white border rounded-lg dark:bg-grey-800 dark:text-grey-300 dark:border-grey-600 fokus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" />
       </div>



    
            <div class="">
                <kelas butang="w-py-4 px-6 penuh teks-sm fon-penjejakan sederhana-teks lebar-putih besarkan peralihan-warna tempoh-300 ubah bg-kelabu-800 tuding bulat:bg-kelabu-700 fokus :outline-none focus:ring focus:ring-grey-300 focus:ring-opacity-50">
                   发布
                </butang>
            </div>
        </form>
    
   
    </div>
    
    </template>
    
    <skrip>
    
eksport lalai {
nama: "papan pemuka",

data(){

    kembali{

    postDetails:{
        
        tajuk:"",
        kandungan:"",
        tag:[
            
            "商业",
            "娱乐",
            "新闻",
            "科学",
            "体育",
            "技术",
            ],
        featured_image:"",
        created_at:"",
     
    }


    }
},


    }
    </script>

Answer 1

Seperti yang telah anda nyatakan, anda boleh menyambung ke Firebase. Kemudian, untuk menyerahkan fail kepada Firebase, anda boleh merujuk kepada Dokumentasi-1 ini yang menyatakan bahawa anda perlu mengeluarkan fail dari firebase.js导出的存储桶导入到index.js. Selepas melengkapkan langkah ini, anda perlu membina bahagian hadapan untuk memilih fail untuk dimuat naik. Anda boleh merujuk kepada dokumentasi yang disebutkan di atas yang menerangkan dengan jelas proses langkah demi langkah untuk memuat naik fail ke Firebase menggunakan Nuxt JS.

Juga rujuk Documentation-2 ini yang menerangkan dengan jelas cara menyerahkan imej ke Firebase menggunakan Nuxt JS.