做一个项目,然后用到了,富文本编辑器,比如:
这种富文本编辑器可以完成由用户来生成,图文并茂的内容,有点像CSDN的写博客部分。然后出现了问题:
富文本可以上传图片:
其需要后端文件,比如写一个php,来对其进行接受和存储。
上传后,就会这样:
你可以把富文本数据保存在数据库里,如果将图片存成base64编码,则会太占内存,甚至完全放不下,几乎不能这么考虑。
~
但这个wangeditor设置的是,显示图片的路径。
很不错,挺好的
~
但是有一个重要问题,点击上传之后,图片就传进了指定文件:
如果用户取消,或者在编辑框内把图片删除,或者用户更改的时候,把一些图片改了。后端的图片依旧在,时间多了,就产生了过多的垃圾图片。
~
看了网上其他的方法,有一些不错的,但好像没有php的。然后我自己构思了一个方法。问题也解决了,在网上看到了很多人问,说不定你也会碰到这个问题,希望对你能有帮助
~
没有帮助,你也要继续精进,努力坚持
~
富文本编辑器可以提取出html代码,其中是有图片路径的,使用正则匹配,取出路径,看和之前相比消失了的,直接删除就行了,很简单。
~
这是整个php文件,作参考:
<?php class ArrHelper { function __construct() { // echo "start!\n"; //do something } function __destruct() { // echo "end!"; //test or just close db! } public function printArr($arr) { for($i=0;$i<count($arr);$i++) { echo $arr[$i]."\n"; } } // //获取数组中相同的部分 function getArrSame($arr1,$arr2) { return array_intersect($arr1, $arr2); } // //获取不同的部分 function getArrDiff($arr1,$arr2) { return array_diff($arr1,$arr2); } // // function getFirstDiff($arr1,$arr2) { $same = $this->getArrSame($arr1,$arr2); return $this->getArrDiff($arr1,$same); } //获取html标签中的src,即图片路径 function getSrc($contentStr){ $imgSrcArr = []; //首先将富文本字符串中的 img 标签进行匹配 $pattern_imgTag = '/<img\b.*?(?:\>|\/>)/i'; preg_match_all($pattern_imgTag,$contentStr,$matchIMG); if (isset($matchIMG[0])){ foreach ($matchIMG[0] as $key => $imgTag){ //进一步提取 img标签中的 src属性信息 $pattern_src = '/\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i'; preg_match_all($pattern_src,$imgTag,$matchSrc); if (isset($matchSrc[1])){ foreach ($matchSrc[1] as $src){ //将匹配到的src信息压入数组 $imgSrcArr[] = $src; } } } } return $imgSrcArr; } } $arrhelper = new ArrHelper(); // 已经实例化了,可以操作 ?>
整个有点长,我来讲讲,结构很简单,也可以自己写。
1.先用这个php函数,取出富文本中的src路径,
function getSrc($contentStr){ $imgSrcArr = []; //首先将富文本字符串中的 img 标签进行匹配 $pattern_imgTag = '/<img\b.*?(?:\>|\/>)/i'; preg_match_all($pattern_imgTag,$contentStr,$matchIMG); if (isset($matchIMG[0])){ foreach ($matchIMG[0] as $key => $imgTag){ //进一步提取 img标签中的 src属性信息 $pattern_src = '/\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i'; preg_match_all($pattern_src,$imgTag,$matchSrc); if (isset($matchSrc[1])){ foreach ($matchSrc[1] as $src){ //将匹配到的src信息压入数组 $imgSrcArr[] = $src; } } } } //$pattern= '/<img\b.+\bsrc\b\s*=\s*[\'\"]([^\'\"]*)[\'\"]/iU'; return $imgSrcArr; }
这是网上找的函数,调用,输出路径:
这个ArrHelper就是,第一段很长的代码中的那个类,可以直接用。
~
既然可以取出图片路径,那么只要知道哪些图片要删除就行了
~
比如,用户之前上传的图片是 1 ,2 ,3 这三张图片,
~
结果第二天。用户登上来一看,觉得图片2有点不对,他把第二张图片,在富文本编辑器里删除了图2,又加了一张4,这时候图片变成了 1,3,4
~
然而后端还是1,2,3,4
~
怎么知道2不见了呢,只需要知道,之前的数组里有,而之后数组中没有了的就行了。
~
这三个函数在第一段代码里有,解释一下:
等于是可以获取,之前有,但修改了之后没有的:
必须输入两个数组,由上图可见,1,2,3相比1,3,4不见的是2,那把2删除就行了。
在用户点击修改时,将修改过的富文本代码和数据库中存的之前的,都进行一次过滤,取出src数组,
~
进行上图中的操作,取出需要删除的路径,用php,unlink()函数循环删除就行了。
本地代码:
<?php //上传富文本到服务器时,垃圾文件会过多, //利用这个文件来进行及时的删除 require_once('../../xxx/xxx.php'); //引入你需要的php文件 $id = $_POST['id']; //获得ID的标志 $html_new = $_POST['html']; //获取修改过的富文本html $sql = "SELECT html FROM 数据库.表名 WHERE id =".$id; $arr_old = $conn->sqlQuerySingle($sql); //获取之前的文本 $src_old = $arrhelper->getSrc($arr_old); //取出之前的富文本中的图片路径 $src_new = $arrhelper->getSrc($html_new); //获取修改过的富文本html中的图片路径 $arr_delete = $arrhelper->getFirstDiff($src_old,$src_new); //将原来的图片路径和新的来进行取差,判断哪些要删除 //$arr_delete数组中,就是要删除的图片路径 for($i=0;$i<count($arr_delete);$i++) { unlink($arr_delete[$i]); //删除指定数组中的文件,文件中全为图片路径 } ?>
写的水,甚至有点复杂,但是基本逻辑就是那样,至少给了大部分碎片化的代码,或者直接把那个类拿去用也行,往里面传参数就是了,怎么传看上面。
~
本地测试一下也行,那个ArrHelper类挺有用的。
~
好吧,大家加油, 继续精进。