У меня есть веб-страница, на которой пользователь может вводить различные теги 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")
и перебирать их
Или можно использовать такие изображения?