创建 HTML5 WYSIWYG：我应该将图像 dataURL 保存在数据库中吗？

Question

我目前正在使用 Google Closure Library 编写 HTML5 WYSIWYG，我正在为用户提供只需将图像文件拖放到带有文本的 contenteditable 字段即可添加图像。

所以我有两种方法来存储这些图像：

1. 从拖放的文件中检索数据URL，创建一个IMG标签，将检索到的数据URL设置为该图像的属性SRC的值，并将该IMG标签插入到编辑器的字段中。当用户提交表单时，我会将所有检索到的 HTML 保存在我的 MySQL 数据库中，稍后将能够使用图像呈现他的文本。

2. 将拖放的图像上传到我的服务器并保存为常规文件。 然后服务器会这样回答： “图像已保存，其 URL 为 http://example.com/images/uploaded-image.png”。 之后，我将执行类似于我的项目 1 的步骤（创建一个带有属性 src="http://example.com/images/uploaded-image.png" 的 IMG 标签并将其插入到可编辑字段中）。

第一种方式将加载数据库更多，因为它需要将图像dataUrl与文本一起存储在数据库字段中。但它使图像添加更加容易和快速，从而改善了用户体验。

第二种方式将加载数据库较少，因为图像将单独存储（在文件系统中），但这种方式需要更多的服务器请求和一些处理器时间在每个图像上添加到所见即所得的文本中。而且它不会立即向用户显示结果，因此用户需要等待他的图像上传，这会使用户体验变得更糟。

考虑到所有利弊，我需要帮助来了解哪种方式在我的情况下更可取。

Answer 1

另一种方式是在一个文件中不仅存储图像，还存储带有图像的完整 HTML。并使用数据库存储指向 HTML 文件的链接。然后设置 Nginx 并获得最佳性能。恕我直言，如果您的应用程序是所见即所得的，那么在编辑之前应该在浏览器中加载并完全布局内容。