使用 quilljs 在服务器上上传图像并在图像标签内添加文件路径
Upload image on server and add file path inside image tag using 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>
所以我可以直接从给定的文件夹中获取图像。
您需要创建自定义图像处理程序(like here) and check base64 string length with fileReader。
我用 quilljs 做了一些小技巧。我在 quilljs 中放置了一些代码,在 if (typeof value === 'string')
这条语句之后,在第 8663 行向我的 php 脚本发送图像 我添加了脚本,该脚本将图像值发送到我的 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.';
}
我正在使用 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>
所以我可以直接从给定的文件夹中获取图像。
您需要创建自定义图像处理程序(like here) and check base64 string length with fileReader。
我用 quilljs 做了一些小技巧。我在 quilljs 中放置了一些代码,在 if (typeof value === 'string')
这条语句之后,在第 8663 行向我的 php 脚本发送图像 我添加了脚本,该脚本将图像值发送到我的 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.';
}