Berjaya memuat naik imej ke Firebase menggunakan Nuxt JS
<p>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 . </p>
<p>Bagaimanakah saya boleh menyediakan projek Nuxt JS saya untuk menyerahkan kedua-dua imej dan fail teks ke Firebase? </p>
<p>Ini adalah templat borang saya. </p>
<pre class="brush:php;toolbar:false;">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></pre></p>
