使用Nuxt JS将图片成功上传至Firebase

Question

<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>

<标签=“密码” 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>> 发布 </按钮>

</表格>

Answer 1

正如您已经提到的，您能够连接到Firebase。然后，要将文件提交到Firebase，您可以参考此文档-1，其中指出您需要将从firebase.js导出的存储桶导入到index.js中。完成此步骤后，您需要构建前端以选择要上传的文件。您可以参考上述提到的文档，其中清楚地描述了使用Nuxt JS将文件上传到Firebase的逐步过程。

还可以参考此文档-2，其中清楚地解释了如何使用Nuxt JS将图像提交到Firebase。