用 QuillJS 图片表达 [413 too large]

Question

我正在尝试使用 QuillJS 让用户编写富文本，然后将其存储为 JSON 以便稍后显示。单个表单中有 2 个这样的富文本区域，并且可能包含图像。 QuillJS 将图像编码为 base64 字符串，我的 POST 请求通过 Express 得到 413。

我试图通过添加快速 json 参数来更改限制，甚至尝试使用极端数字。

// app.js
//----------------------------------------------------
// Middlewares
//----------------------------------------------------
app.use(express.json({limit: '2000mb'}));
app.use(express.urlencoded({extended: true, limit:'2000mb'}));

即使这样也无济于事，我认为让这些参数具有这样的值是不合逻辑的。

我尝试使用 json 和 urlencoded enctypes。当我尝试 post 和 multipart/form 时，req.body 是空的。

// My html page (pugJS)

form(enctype='application/x-www-form-urlencoded', action='/editor/page', 
     method='POST', onsubmit='return addContent()')

.form-control
        label Content-1
        div#toolbar
        div#editor
        input#content(name='content', type='text',  hidden)

在表单提交之前运行的

addContent() 函数只是将 input#content 的值更改为 JSON.stringify(#editor.getContents())

我希望能够在单个数据库行中存储两个 quill 内容，以便稍后显示。

Answer 1

更好的方法是覆盖图像上传功能，然后将图像保存在 Amazon S3 或某些云服务器中。然后将其粘贴到编辑器中作为 <img src="http://uploaded-image-url"> 这将解决您的最大内存问题。

Answer 2

我在@argo 提到的几个小时前就解决了我的问题，我就是这样做的。所以我想 post 解决方案的一些细节。我也受到 github 问题的指导，但似乎无法再次找到 link，如果我找到它，我将编辑 post 并添加它。

// Quill - EN content
var quillEn = new Quill('#editor-en', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

// set custom image handler
quillEn.getModule('toolbar').addHandler('image', () => {
  selectLocalImage(quillEn);
});

// create fake input to upload image to quill
function selectLocalImage(editor) {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/png, image/jpeg')
  input.click();

  // Listen upload local image and save to server
  input.onchange = () => {
    const file = input.files[0];
    saveImageToServer(editor, file);
  };
}

// upload image to server
function saveImageToServer(editor, file) {
  const fd = new FormData();
  fd.append('image', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/page/upload_image', true);
  xhr.onload = () => {
    if (xhr.status === 200) {
      // this is callback data: url
      const url = JSON.parse(xhr.responseText).data;
      insertToEditor(editor, url);
    }
  };
  xhr.send(fd);
}

// manipulate quill to replace b64 image with uploaded image
function insertToEditor(editor, url) {
  // push image url to rich editor.
  const range = editor.getSelection();
  editor.insertEmbed(range.index, 'image', url.toString());
}

在你 POST 图片的后端，你必须 return json as { data: FullUrlToImg } with 200 response，如果你想将你的状态更改为 201 或其他否则，不要忘记在 saveImageToServer 函数中更新它。

总而言之，您为您的羽毛笔编辑器设置了自定义图像处理程序，您 post 在用户选择插入后立即将图像发送到服务器，然后用您上传的图像替换 URL在编辑器中。

谢谢。

用 QuillJS 图片表达 [413 too large]

Express [413 too large] with QuillJS image

forms

express

quill