<p>I am developing a web application that submits and retrieves data from Firebase, I have been able to fully configure my Nuxt JS application to connect with Firebase, but the problem arises when I want to submit mixed image files and text files . </p> <p>How do I set up my Nuxt JS project to submit both images and text files to Firebase? </p> <p>This is my form template. </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">Create post</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" 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">content</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</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>