使用Nuxt JS将图片成功上传至Firebase
<p>我正在开发一个从Firebase提交和检索数据的Web应用程序，我已经能够完全配置我的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-white border rounded-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: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>
<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 rounded-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>
<input v-model ="postDetails.created_at" type="text" class="block w-full px-6 py-4 mt-2 text-gray-700 bg-white border rounded-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="">
<button class="w-full py-4 px-6 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50">
发布
</button>
</div>
</form>
</div>
</template>
<script>
export default {
name: "dashboard",
data(){
return{
postDetails:{
title:"",
content:"",
tag:[
"商业",
"娱乐",
"新闻",
"科学",
"体育",
"技术",
],
featured_image:"",
created_at:"",
}
}
},
}
</script></pre></p>
1
871
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
正如您已经提到的，您能够连接到Firebase。然后，要将文件提交到Firebase，您可以参考此文档-1，其中指出您需要将从
firebase.js导出的存储桶导入到index.js中。完成此步骤后，您需要构建前端以选择要上传的文件。您可以参考上述提到的文档，其中清楚地描述了使用Nuxt JS将文件上传到Firebase的逐步过程。还可以参考此文档-2，其中清楚地解释了如何使用Nuxt JS将图像提交到Firebase。