Description字段无法上传至Firestore问题求助
问题:description文本字段无法上传至Firestore
我开发的博客编辑器中,description字段始终无法上传到Firestore。该字段的实现逻辑与title、article等其他文本字段完全一致,排除Firebase本身的问题,怀疑代码存在冲突但无法定位具体问题点。相关代码如下:
JavaScript代码
import { initializeApp } from "firebase/app"; import { getFirestore } from 'firebase/firestore'; import { doc, setDoc } from "firebase/firestore"; const firebaseConfig = { // 已移除Firebase配置信息 }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); const blogTitleField = document.querySelector('.title'); const articleField = document.querySelector('.article'); const DescriptionField = document.querySelector('.description'); // banner const bannerImage = document.querySelector('#banner-upload'); const banner = document.querySelector(".banner"); let bannerPath; const publishBtn = document.querySelector('.publish-btn'); const uploadInput = document.querySelector('#image-upload'); bannerImage.addEventListener('change', () => { uploadImage(bannerImage, "banner"); }); uploadInput.addEventListener('change', () => { uploadImage(uploadInput, "image"); }); const uploadImage = (uploadFile, uploadType) => { const [file] = uploadFile.files; if (file && file.type.includes("image")) { const formdata = new FormData(); formdata.append('image', file); fetch('/upload', { method: 'post', body: formdata }) .then(res => res.json()) .then(data => { if (uploadType === "image") { addImage(data, file.name); } else { bannerPath = `${location.origin}/${data}`; banner.style.backgroundImage = `url("${bannerPath}")`; } }); } else { alert("Please upload an image only."); } }; const addImage = (imagepath, alt) => { let curPos = articleField.selectionStart; let textToInsert = `\r\r`; articleField.value = articleField.value.slice(0, curPos) + textToInsert + articleField.value.slice(curPos); }; const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; // ... publishBtn.addEventListener('click', async () => { if (articleField.value.length && blogTitleField.value.length) { try { // Generating ID const letters = 'abcdefghijklmnopqrstuvwxyz'; const blogTitle = blogTitleField.value.split(' ').join('-'); let id = ''; for (let i = 0; i < 4; i++) { id += letters[Math.floor(Math.random() * letters.length)]; } // Setting up docName const docName = `${blogTitle}-${id}`; const date = new Date(); // For published at info await setDoc(doc(db, 'blogs', docName), { description: DescriptionField.value, title: blogTitleField.value, article: articleField.value, bannerImage: bannerPath, publishedAt: `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`, }); location.href = `/${docName}`; } catch (err) { console.error(err); } } });
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>blog editor</title> <link rel="stylesheet" href="css/home.css" /> <link rel="stylesheet" href="css/editor.css" /> </head> <body> <div class="banner"> <input type="file" accept="image/*" id="banner-upload" hidden> <label for="banner-upload" class="banner-upload-btn"><img src="img/upload.png" alt="upload banner"></label> </div> <div class="blog"> <textarea type="text" class="description" placeholder="Start writing here..."></textarea> <textarea type="text" class="title" placeholder="Blog title..."></textarea> <textarea type="text" class="article" placeholder="Start writing here..."></textarea> </div> <div class="blog-options"> <button class="btn dark publish-btn">publish</button> <input type="file" accept="image/*" id="image-upload" hidden> <label for="image-upload" class="btn grey upload-btn">Upload Image</label> </div> <script type="module" src="dist/bundle.js"></script> </body> </html>
内容的提问来源于stack exchange,提问作者Sebastian Eichenauer
相关产品推荐
相关产品推荐

