Загрузите изображение на сервер и добавьте путь к файлу внутри тега изображения, используя quilljs

Question

Загрузите изображение на сервер и добавьте путь к файлу внутри тега изображения, используя quilljs

я использую quilljs для моего редактора. Все мои данные обрабатываются базой данных MySQL. я использую Angularjs 1.x и для бэкэнда Cakephp это мой каркас
В настоящее время я пытаюсь создать форумную страницу, на которой я хочу сохранить несколько изображений вместе с текстом, который будет отформатирован с использованием quilljs.

<p>sd<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgA....SUVORK5CYII=" alt="i am image"><b>it is image of earth</b></p>

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

 <p>sd<img src="../img/709f2d0be9d13c645037f1b9bb066b00a6d7/image1.jpg" alt="i am image"><b>it is image of earth</b></p>

Таким образом, я могу получить изображение прямо из данной папки.

1

angularjs cakephp mysql php quill

Решение

Другие решения

Вам нужно создать собственный обработчик изображения (как здесь) и проверьте длину строки base64 с помощью FileReader.

1

Источник

Accepted Answer

Я сделал маленький трюк с Quilljs. я поместил некоторый код в quilljs, который отправляет изображение к моему php-скрипту в строке 8663 после if (typeof value === 'string') это заявление я добавил скрипт, который отправляет значение изображения в мой скрипт php

var img = {
'img' : value
}
$.ajax({
url: "../Writers/writerCertificateupload",
data: img,
contentType: undefined,
type: 'post'
}).success(function(path){
node.setAttribute('src', path);
})

где node.setAttribute('src', path); устанавливает путь, который я возвращаю из сценария php, он устанавливает его на тег изображения, т.е. <img src="../img/709f2d0be9d13c645037f1b9bb066b00a6d7/image1.jpg">
а затем он устанавливает его в редакторе, а затем мы можем сохранить эти данные в редакторе. Вот как я должен решить эту проблему.

мой php код

        public function writerCertificateupload()//pending
{
$id = $this->Auth->user('id');
$this->autoRender=false;
define('UPLOAD_DIR', 'files/post/');
$img = $_POST['img'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.jpg';
$success = file_put_contents($file, $data);

$file = "../".$file;
print $success ? $file : 'Unable to save the file.';
}

3