使用 quilljs 在服务器上上传图像并在图像标签内添加文件路径

Question

我正在使用 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>

所以我可以直接从给定的文件夹中获取图像。

Answer 1

您需要创建自定义图像处理程序（like here) and check base64 string length with fileReader。

Answer 2

我用 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 在服务器上上传图像并在图像标签内添加文件路径

Upload image on server and add file path inside image tag using quilljs

php

mysql

angularjs

cakephp

quill