Question

我正在尝试使用QuillJS让用户编写富文本格式，然后将其存储为JSON，以便以后显示。这些富文本区域中有2种处于单一形式，并且可能包含图像。 QuillJS将图像编码为base64字符串，而Express发出的POST请求结果为413。

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

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

即使这没有帮助，我认为让这些参数具有这样的值也不合逻辑。

我尝试使用json和urlencoded编码类型。当我尝试使用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())

我希望能够在一个数据库行中存储两个羽毛笔内容，以便以后显示。

Answer 1

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

Answer 2

我在提到@argo之前几个小时就解决了我的问题，我就是这样做的。因此，我想在解决方案中发布一些细节。我也受到了github问题的指导，但似乎无法再次找到该链接，以防万一，我将编辑该帖子并将其添加。

// 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());
}

在发布图片的后端中，您必须以200响应返回json作为{ data: FullUrlToImg }，如果要将状态更改为201或其他，请不要忘记在{{1}中进行更新}函数。

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

谢谢。

用QuillJS图片表达[413太大]

2 个答案: