Multer, NodeJS: извлекать и конвертировать теги изображений с необработанными данными в файл изображения, чтобы multer мог их загружать - PullRequest
0 голосов
/ 14 июля 2020

У меня есть веб-страница, на которой пользователь может вводить различные теги html / bootstrap в div, который "доступен для редактирования" (функция changeFocus просто помещает курсор обратно в последний div, у которого был фокус, когда пользователь нажимает кнопку, чтобы добавить элементы)

 <input type="hidden" name="fOutput" id="hidden">
  <div id="outputDiv" class="row">
    <div class='col-lg-12'>
      <div class='output' id='output0' contenteditable="true" spellcheck="false" onfocus='ChangeFocus(this)'>
      </div>
    </div>
  </div>

Пользователь может добавлять страницы (карусель), карточки, изменять размер текста, itali c, подчеркивание, выравнивание, .. Когда пользователь нажимает кнопку, он помещает все в скрытое поле ввода и позже считывается на стороне сервера и сохраняется в базе данных mon goose .. пока нет проблем ..

Это код, который вызывается при нажатии кнопки (введите submit, следовательно "return true") .. код проходит все и сначала удаляет некоторые нежелательные теги ..

function process() {
   var tekst = document.getElementById("outputDiv").innerHTML;
   tekst = tekst.replace(/contenteditable="true"/gi, "");
   tekst = tekst.replace(/onfocus="ChangeFocus\(this\)"/gi, "");
   document.getElementById("hidden").value = tekst;
   return true;
 }

теперь я добавил функцию, с помощью которой пользователи могут добавлять изображения как страницы (например, у них есть отсканированная страница из книгу и не хочется копировать весь текст) .. для простоты я просто запихнул изображение в тег img. Результат выглядит следующим образом:

<img class="lesImage" src="data:image/jpeg;base64,/9j/4S7iRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAA...really really long string">

Если я втисну это в базу данных mon goose, он просто сработает (хотя пришлось добавить «app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));», иначе это не сработает) Но не было бы лучше, если бы я загрузил изображения на свой веб-сервер и преобразовал их в img sr c в fe: src = "uploads / image1.jpg".

Большинство источников на inte rnet загружают изображения на -the-fly, но я хотел сначала просмотреть весь "урок" ... и поскольку я не знаю с самого начала, сколько изображений содержит / будет содержать "урок", я не могу жестко что-то закодировать (или, может быть, я что-то пропустил?)

Я настроил Multer для загрузки изображений в папку в моей publi c папке

var storage = multer.diskStorage({ 
destination: function (req, file, cb) { 

    // Uploads is the Upload_folder_name 
    cb(null, "uploads") ;
}, 
filename: function(req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
  }) ;
 

, но я не могу понять, как преобразовать "данные" изображений обратно в реальные изображения, чтобы Multer мог их обработать ... поскольку он находится на стороне сервера, я не могу использовать document.getElementByClassname("lesImage") и перебирать их

Или можно использовать такие изображения?

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