在编辑器中上传图片 - 最佳方法？

Question

我在我的项目中使用了 tinymce 编辑器。对于图像上传，我将图像转换为 base64 并在编辑器中显示相同的图像。也就是说，我没有向服务器上传任何数据。代码如下

<Editor
                              initialValue={selectedDocument.html_content}
                              init={{
                                plugins: 'link image code, lists',
                                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code | numlist bullist',
                                height: 600,
                                forced_root_block : "",
                                force_br_newlines : true,
                                force_p_newlines : false,
                                images_upload_handler: function (blobInfo, success, failure) {
                                  // no upload, just return the blobInfo.blob() as base64 data
                                  success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
                                },
                                setup: function(editor) {
                                  me.tinyMce = editor;
                                }
                              }}
                              onChange={this.handleEditorChange}
                            />

我只是想知道这是否是正确的方法。这种方法有什么缺点吗？

或者我应该将图片上传到服务器并使用图片 url 代替吗？

想法？

Answer 1

您应该将图片单独上传到服务器，并将 base64 图像字符串替换为从服务器返回的 URL。

为什么？

base64 图片很大。如果你有几个，它会降低你的编辑器和你的应用程序的性能。将图像添加到编辑器时，您会遇到延迟。
因为 base64 图像只是普通字符串。当您上传它们时，您的 post body 会变得很大。如果您没有正确配置服务器，这可能会导致 API 失败。
单独保存 RichText HTML 对您的数据库来说是巨大的。如果您向其中添加 base64 图像字符串。您的数据库也将受到处理此类数据的影响。

在编辑器中上传图片 - 最佳方法？

Image upload in editor - Best approach?

javascript

tinymce

image-uploading

为什么？