Laden Sie Bilder mit Nuxt JS erfolgreich auf Firebase hoch
<p>Ich entwickle eine Webanwendung, die Daten von Firebase übermittelt und abruft. Ich konnte meine Nuxt JS-Anwendung vollständig für die Verbindung mit Firebase konfigurieren, aber das Problem tritt auf, wenn ich gemischte Bilddateien und Textdateien übermitteln möchte. </p>
<p>Wie richte ich mein Nuxt JS-Projekt ein, um sowohl Bilder als auch Textdateien an Firebase zu senden? </p>
<p>Dies ist meine Formularvorlage. </p>
<pre class="brush:php;toolbar:false;">Index.js.
<Vorlage>
<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">Beitrag erstellen</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" block w-full px-6 py-4 mt-2 text-gray-700 bg-white border abgerundet-lg dunkel: 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" 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 ="obj in postDetails.tag" :value="obj" class="text-black text-lg py-5">{{obj}}</option>
</select>
</div>
<div class="">
<label for="password" class="block text-sm text-gray-800 dark:text-gray-200">特色图片</label>
<input v-model ="postDetails.featured_image" type="text" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border abgerundet-lg dunkel:bg-gray-800 dunkel:text-gray-300 dunkel:grenzgrau-600 focus:border-blue-400 dunkel: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>
<input v-model ="postDetails.created_at" type="text" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border abgerundet-lg dunkel:bg-gray-800 dunkel:text-gray-300 dunkel:grenzgrau-600 focus:border-blue-400 dunkel:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40" />
</div>
<div class="">
<button class="w-full py-4 px-6 text-sm Schriftart-Medium Tracking-Wide Text-Weiß Großschreibung Übergangsfarben Dauer-300 Transformation bg-gray-800 abgerundet Hover:bg-gray-700 Fokus :outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50">
发布
</button>
</div>
</form>
</div>
</template>
<script>
Standard exportieren {
Name: "Dashboard",
Daten(){
zurückkehren{
Beitragsdetails:{
Titel:"",
Inhalt:"",
Etikett:[
„商业“,
„娱乐“,
„新闻“,
„科学“,
„体育“,
„技术“,
],
feature_image:"",
erstellt_at:"",
}
}
},
}
</script></pre></p>
