Javascript 如何使用react quill将HTML内容存储到DB

我正在使用

React.js

&

Node.js

（

express

&

mongoose

）和库来编辑我的内容

现在，我正在将react quill中的内容作为字符串HTML保存到我的react状态

...

const [content, setContent] = useState<string>('');

const onChange = (content: any, delta: any, source: any, editor: any) => {
  setContent(editor.getHTML());
};

<ReactQuill
  theme="snow"
  value={content}
  onChange={onChange}
  modules={modules}
/>

...

...
const[content，setContent]=useState（“”）；
const onChange=（内容：任意、增量：任意、源：任意、编辑器：任意）=>{
setContent（editor.getHTML（））；
};
...

将HTML作为字符串存储到我的状态后，我向express应用程序发送

POST

请求，请求将该字符串存储到MongoDB数据库中

问题是，当我再次尝试在我的react应用程序中获取此HTML时（在一个博客帖子页面中），内容非常大（目前有3篇帖子的内容是1MB）

响应大小的图像：

响应结构的图像：

我的问题是如何使数据保持较轻的重量

多谢各位

---

编辑：我没有提到我也在使用react quill工具栏上传图像（可能这就是问题所在）

我看不出您的操作有任何问题，我同意您的看法，即图像大小可能与在数据库中存储图像有关

关于如何减少每条记录的大小，我有两个想法，但请在尝试任何一个之前阅读此答案的最后一节

在将文本存储到MongoDB之前，请尝试压缩文本。例如，如果你想用JavaScript做任何事情，你可以使用类似的东西

将每个静态资产（图像、样式表、脚本、视频等）存储在对象存储服务上，并保存对它的引用。例如，在您提供的图像上，您将图像编码为

base64

。您可以拍摄该图像，将其存储在类似于

S3

的内容中，然后在

content

值中替换对其的引用

---

尽管这可能会改善数据库的大小，但您应该首先问问自己是否需要它。如果您首先尝试了解数据将如何随时间扩展，以及这将如何影响查询的响应时间，这将是最好的。如果您每次查询多个项目或仅查询一个项目，答案将有所不同。

非常感谢您的回答。我将尝试lz字符串。