使用quilljs在服务器上上传图像并在图像标签内添加文件路径 [英] Upload image on server and add file path inside image tag using quilljs

问题描述

我正在使用quilljs作为我的编辑器.我所有的数据都由mysql数据库处理.我正在使用Angularjs 1.x，对于后端Cakephp是我的框架. 我目前正在尝试建立一个论坛类型的页面，在其中要保存多个图像以及将使用quilljs格式化的文本

I am using quilljs for my editor. All my data are handle by mysql database. I am using Angularjs 1.x and for backend Cakephp is my frame-work. I am currently trying to build a forum kind of page in which I want to save multiple images along with text which will be formatted using quilljs

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

这是当前存储在我的数据库中的内容.现在，如果有多个大图像进来，那么字段的大小将会太大，因为我想在severside文件夹中上载图像，并想在图像标签中打印图像地址，例如:

This is what currently storing in my database. Now if there is multiple big images come in then size of field will be too much high there for I want to upload image inside severside folder and want to print image address inside image tag like:

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

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

So I can fetch image directly from given folder.

推荐答案

我在quilljs上做了一些小技巧.我在if (typeof value === 'string')此语句后在quilljs内放了一些代码，将图像发送到我的php脚本，行号为8663，我添加了将图像值发送到我的php脚本的脚本

i have done small trick with quilljs. i have put some code inside quilljs which send image toward my php script on line number 8663 after if (typeof value === 'string') this statement i have added script which sends image value to my php script

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"> 然后将其设置在编辑器中，然后我们可以将数据保存在编辑器中.这就是我解决这个问题的方式.

where node.setAttribute('src', path); sets path which i am returning from php script it sets it on image tag i.e <img src="../img/709f2d0be9d13c645037f1b9bb066b00a6d7/image1.jpg"> and then it sets it inside editor and then we can save that data within editor. this is how i have solve this problem.

我的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在服务器上上传图像并在图像标签内添加文件路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！