PHP防止富文本编辑器让服务器产生过多垃圾图片

Posted 2023-02-19 F1gh4

php防止服务器富文本提交产生过多垃圾图片

1.前言

做一个项目，然后用到了，富文本编辑器，比如：

这种富文本编辑器可以完成由用户来生成，图文并茂的内容，有点像CSDN的写博客部分。然后出现了问题：

富文本可以上传图片：

其需要后端文件，比如写一个php，来对其进行接受和存储。
上传后，就会这样：

你可以把富文本数据保存在数据库里，如果将图片存成base64编码，则会太占内存，甚至完全放不下，几乎不能这么考虑。

~
但这个wangeditor设置的是，显示图片的路径。
很不错，挺好的
~
但是有一个重要问题，点击上传之后，图片就传进了指定文件：

如果用户取消，或者在编辑框内把图片删除，或者用户更改的时候，把一些图片改了。后端的图片依旧在，时间多了，就产生了过多的垃圾图片。
~

2.解决

看了网上其他的方法，有一些不错的，但好像没有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();
// 已经实例化了，可以操作
?>

整个有点长，我来讲讲，结构很简单，也可以自己写。

3.分开来讲：

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类挺有用的。
~
好吧，大家加油, 继续精进。