ueditor 图片上传路径配置

电玩女神 2022-06-08 10:42 1835阅读 0赞

ueditor的图片上传路径配置文件是 ueditor/php/config.json

![Center][]

以下是我遇到的一些因为ueditor默认设置引起的图片上传路径配置的问题，特此拿出来与大家分享，如果有说的不对的，欢迎批评指正

一、ueditor 的图片上传保存路径  默认在网站根目录下，最前面的 '/' 就是网站根目录的绝对路径，

如果把最前面的 '/' 删掉 改为 './'之类的 那也是

/ueditor/php/upload/image/\{yyyy\}\{mm\}\{dd\}/\{time\}\{rand:6\}

原本ueditor这样的设定是为了便于项目调取上传上来的图片视频等文件

然而有些情况下 我们做项目往往客户只会给我们一个子目录的权限 不会给我们根目录的权限

这时只要修改上图的最后一行

"imagePathFormat": "/(你的项目目录)/ueditor/php/upload/image/\{yyyy\}\{mm\}\{dd\}/\{time\}\{rand:6\}"

二、ueditor上传到数据库的图片路径即为上面的"imagePathFormat"

然而这样的设定会不利于项目的迁移，试想你的数据库中都是上面"imagePathFormat"这样绝对定位，如果一旦你的项目目录发生改变，

那就会出现读不到图片的问题。

（ps.当然如果你的图片位置放在网站根目录，而且没有什么权限问题，那就没有什么问题，下面的内容也可以不用看了）

在我看来，还是不要把图片上传的路径设的太死，设为项目的相对路径会比较好

以下是我自己想出的解决方法，如果有知道更简便方法的或者可以重构以下的代码，还是希望可以多多指教

(ps. 下面的代码用到了一些ueditor 的API 如果不太了解的话, 可以移步[http://ueditor.baidu.com/doc/][http_ueditor.baidu.com_doc] 进行查阅)

var content = ue.getContent();      //获取编辑器内容

var root1 = UE.htmlparser(content, true);      //将上面获得的html字符串转换成uNode节点 便于之后进行dom操作

var imgs = root1.getNodesByTagName('img');      //取所有img标签

//遍历所有的img标签 修改src

for (var i in imgs) \{

var src = changeImgUrl(imgs\[i\].getAttr('src'));

imgs\[i\].setAttr('src', src);

//取“imagePathFormat” 中'/ueditor'之后的目录路径

function changeImgUrl(string) \{

var index=string.indexOf('ueditor');

var result="/"+string.substring(index,string.length);

return result;

上面代码的逻辑就是通过ueditor 提供的API进行dom操作 修改img的src，

**筛选掉'imagePathFormat'中的项目路径，得到去掉'/ueditor/..'的路径(当然不要去修改imagePathFormat， 不然你还是会下载到相对于根目录的路径下的！)**

将修改后的内容提交到数据库，便于之后进行**拼接相对路径**

接下来就要开始获取项目目录，准备开始拼接，

不过js没有可以获取项目目录的方法，需要借助后端语言，如php、java等

(当然如果我说错了的话，还请指正，共同进步嘛)

这里我以php为例，来讲讲如何获取项目目录（java肯定也有类似的方法，可惜我才疏学浅，对java着实涉猎有限）

php需要借助**$\_SERVER** 这个服务器变量，不太了解的小伙伴可以移步 [http://www.5idev.com/p-php\_server.shtml][http_www.5idev.com_p-php_server.shtml]  进行了解

你也可以直接var\_dump($\_SERVER); 看下里面究竟有哪些东西

通过了解我们可以发现 **$\_SERVER\['PHP\_SELF'\]、$\_SERVER\['SCRIPT\_NAME'\]** 与 **$\_SERVER\['REQUEST\_URI'\]** 三者非常相似，返回的都是与当前 URL 或 PHP 程序文件相关的信息，这可能就使我们需要的项目目录

我们再来看一看这三个变量的区别

[$\_SERVER\['PHP\_SELF'\]][SERVER_PHP_SELF]：相对于网站根目录的路径及 PHP 程序名称。

$\_SERVER\['SCRIPT\_NAME'\]：相对于网站根目录的路径及 PHP 程序文件名称。

$\_SERVER\['REQUEST\_URI'\]：访问此页面所需的 URI

下面是我基于thinkphp做的项目的一个url，学过相关知识的童鞋是不是特别熟悉

http://localhost/guzhen/index.php/Admin/Message/lst?cid=2

分别echo 上面的三个变量

*  $\_SERVER\['PHP\_SELF'\] 得到：/guzhen/index.php/Admin/Message/lst
 *  $\_SERVER\['SCRIPT\_NAME'\] 得到：/guzhen/index.php
 *  $\_SERVER\['REQUEST\_URI'\] 得到：/guzhen/index.php/Admin/Message/lst?cid=2

这里我们可以借助**dirname(****$\_SERVER\['SCRIPT\_NAME'\])** 得到** **/guzhen 这就是我们需要的项目路径

之后只有将 项目路径 和前面筛选好的 '/ueditor'这样的路径进行拼接

拼接的方式也很多，可以后端取到数据传给前端的时候进行拼接，也可以前端通过ueditor的API进行拼接

[Center]: /images/20220608/164f55d985b241b99e8ff6fe7775e967.png
[http_ueditor.baidu.com_doc]: http://ueditor.baidu.com/doc/
[http_www.5idev.com_p-php_server.shtml]: http://www.5idev.com/p-php_server.shtml
[SERVER_PHP_SELF]: http://www.5idev.com/p-php_server_php_self.shtml