在服务器上上传图像并使用 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

我用 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.';
    }