Экспресс [413 слишком большой] с изображением QuillJS - PullRequest
Новая
       14

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

0 голосов
/ 12 апреля 2019

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

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

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

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

Я пытался использовать json и urlencoded enctypes. Когда я пытался опубликовать с 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())

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

Ответы [ 2 ]

1 голос
/ 14 апреля 2019

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

0 голосов
/ 14 апреля 2019

Я исправил свою проблему за несколько часов до того, как @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.

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

Спасибо.

...