You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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![${alt}](${imagepath})\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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.20 06:45:10