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>

这是当前存储在我的数据库中的内容。现在如果有多个大图像进来那么字段的大小会太高我想要在severside文件夹中上传图像并想要在图像标记内打印图像地址，如：

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

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

Answer 1

我用quilljs完成了一些小技巧。我已经在quilljs中放了一些代码，在if (typeof value === 'string')这个语句后添加脚本将图像值发送到我的php脚本

，将图像发送到我的php脚本的第8663行。

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

Answer 2

您需要创建自定义图片处理程序（like here）并使用fileReader检查base64字符串长度。

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

2 个答案: