Экспресс [413 слишком большой] с изображением QuillJS

Я пытаюсь использовать QuillJS, чтобы пользователь мог написать форматированный текст, а затем сохранить его как JSON для отображения позже. В одной форме есть 2 из этих областей с форматированным текстом, которые могут включать изображения. QuillJS кодирует изображения как строки base64, и мой запрос POST приводит к 413 Express.

Я пытался изменить ограничения, добавляя экспресс-параметры json, даже пробуя крайние числа.

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

Даже это не помогло и, думаю, не логично ставить эти параметры на такие значения.

Я пробовал использовать enctypes 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())

Я хочу иметь возможность хранить два содержимого перьев в одной строке базы данных, чтобы отобразить их позже.


forms express quill
person Alp    schedule 12.04.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Лучшим подходом к этому было бы перезаписать функцию загрузки изображения, а затем сохранить изображение в Amazon S3 или на каком-либо облачном сервере. Затем вы вставляете его в редактор как <img src="http://uploaded-image-url">. Это решит вашу проблему с максимальным объемом памяти.

person argo    schedule 14.04.2019

arrow_upward
1
arrow_downward

Я исправил свою проблему за несколько часов до упоминания @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());
}

В бэкэнде, где вы отправляете изображение POST, вы должны вернуть json как { data: FullUrlToImg } с ответом 200, если вы хотите изменить свой статус на 201 или что-то еще, не забудьте обновить его в функции saveImageToServer.

Итак, чтобы подвести итог, вы устанавливаете собственный обработчик изображений для своего редактора перьев, вы отправляете изображение на сервер, как только пользователь выбирает вставку, затем вы заменяете URL-адрес загруженным изображением в редакторе.

Спасибо.

person Alp    schedule 14.04.2019