Ueditor官方文档之上传路径配置

文档说明

支持版本：支持 UEditor 1.4.2+ 的版本

1.4.2+ 以后路径配置主要相关的配置项是 PathFormat 和 UrlPrefix 的配置项。

这两个配置项主要针对如下功能：

• 图片上传：imagePathFormat、imageUrlPrefix
• 涂鸦上传：scrawlPathFormat、scrawlUrlPrefix
• 截屏上传：snapscreenPathFormat、snapscreenUrlPrefix
• 附件上传：filePathFormat、fileUrlPrefix
• 视频上传：videoPathFormat、videoUrlPrefix

当前文档的例子是以 图片上传 为例介绍，其他配置方法类同。

imagePathFormat 介绍

作用：指定文件上传路径和返回路径，支持格式化

1.4.2+ 路径配置项无论是否以 "/" 开头，都是相对于 网站根目录 的路径。

例如，假设网站根目录是："D://apache/www/"，以下是 imagePathFormat 的配置值以及对应的存放目录。

"/upload/{filename}" --> "D://apache/www/upload/"

"upload/{filename}" --> "D://apache/www/upload/"

"./upload/{filename}" --> "D://apache/www/upload/"

"../upload/{filename}" --> "D://apache/upload/"

1 指定文件保存目录

上传路径可以使用根路径和相对路径，推荐使用根路径的配置。

1.1 使用 "/" 开头的根路径

imagePathFormat 参数推荐使用 "/" 开头的配置，这样的值指相对于网站根目录的位置。

例子：网站根目录是 "D://apache/www/"，imagePathFormat 参数设置为 "/upload/image/{filename}"，那么上传位置在 "D://apache/www/upload/image/" 目录下。

1.2 使用非 "/" 开头的相对路径

imagePathFormat 参数使用非 "/" 开头的相对路径时，上传位置也是相对于网站根目录（asp、.net例外，相对于应用程序的目录）。

例子1：网站根目录是 "D://apache/www/"，imagePathFormat 参数设置为 "ueditor/php/upload/{filename}"，那么上传位置在 "D://apache/www/ueditor/php/upload/" 目录下。

例子2：网站根目录是 "D://apache/www/"，imagePathFormat 参数设置为 "../upload/{filename}"，那么上传位置在 "D://apache/upload/" 目录下。

2 控制插入到编辑器的路径

2.1 后台返回路径

后台执行上传结束后，返回路径是按照 imagePathFormat 配置项替换后的字符串，原样输出到前端。

例子1：上传文件名为 123.jpg，imagePathFormat 参数设置为 "/ueditor/php/upload/{filename}"，那么返回路径是 "/ueditor/php/upload/123.jpg"。

例子2：上传文件名为 123.jpg，imagePathFormat 参数设置为 "../upload/{filename}"，那么返回路径是 "../upload/123.jpg"。

2.2 通过 imageUrlPrefix 配置项给返回路径添加前缀

有一些情况下仅仅靠返回路径是不能得到正常的图片链接，需要通过配置 imageUrlPrefix 给插入图片的路径添加前缀。

有两种情况下需要配置 imageUrlPrefix：

• asp和.net下，应用程序目录不是网站根目录，需要给路径添加前缀。

• 在跨域上传的情况下，就需要配置imageUrlPrefix前缀。假设页面在 a.com 域下，文件上传到 b.com 域下，这样要配置 imageUrlPrefix 为 "http://b.com" 才能得到正常路径。

3 格式化上传路径和文件名

由于上传文件名容易冲突，编辑器提供了配置上传文件路径和文件名格式的方法，可以在 config.json 配置 imagePathFormat 项，后台上传文件会按照配置的格式命名。

3.1 格式化字符串的参数

<span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">filename</span><span class="pun" style="color:#ffffff;">}</span><span class="pln" style="color:#ffffff;">  </span><span class="com" style="color:#87ceeb;">//会替换成文件名 [要注意中文文件乱码问题]</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">rand</span><span class="pun" style="color:#ffffff;">:</span><span class="lit" style="color:#cd5c5c;">6</span><span class="pun" style="color:#ffffff;">}</span><span class="pln" style="color:#ffffff;">    </span><span class="com" style="color:#87ceeb;">//会替换成随机数,后面的数字是随机数的位数</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">time</span><span class="pun" style="color:#ffffff;">}</span><span class="pln" style="color:#ffffff;">      </span><span class="com" style="color:#87ceeb;">//会替换成时间戳</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">yyyy</span><span class="pun" style="color:#ffffff;">}</span><span class="pln" style="color:#ffffff;">      </span><span class="com" style="color:#87ceeb;">//会替换成四位年份</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">yy</span><span class="pun" style="color:#ffffff;">}</span><span class="pln" style="color:#ffffff;">        </span><span class="com" style="color:#87ceeb;">//会替换成两位年份</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">mm</span><span class="pun" style="color:#ffffff;">}</span><span class="pln" style="color:#ffffff;">        </span><span class="com" style="color:#87ceeb;">//会替换成两位月份</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">dd</span><span class="pun" style="color:#ffffff;">}</span><span class="pln" style="color:#ffffff;">        </span><span class="com" style="color:#87ceeb;">//会替换成两位日期</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">hh</span><span class="pun" style="color:#ffffff;">}</span><span class="pln" style="color:#ffffff;">        </span><span class="com" style="color:#87ceeb;">//会替换成两位小时</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">ii</span><span class="pun" style="color:#ffffff;">}</span><span class="pln" style="color:#ffffff;">        </span><span class="com" style="color:#87ceeb;">//会替换成两位分钟</span><span class="pln" style="color:#ffffff;"></span><span class="pun" style="color:#ffffff;">{</span><span class="pln" style="color:#ffffff;">ss</span><span class="pun" style="color:#ffffff;">}</span><span class="pln" style="color:#ffffff;">        </span><span class="com" style="color:#87ceeb;">//会替换成两位秒</span>

3.4 文件名冲突

当按照模板命名文件，依旧出现冲突，会直接覆盖同名文件，所以建议 imagePathFormat 使用时间戳和随机数来较少冲突。

3.5 非法字符

后台会过滤模板上的非法字符，非法字符列表如下，会替换成空：

<span class="pln" style="color:#ffffff;"> \ </span><span class="pun" style="color:#ffffff;">:</span><span class="pln" style="color:#ffffff;"> </span><span class="pun" style="color:#ffffff;">*</span><span class="pln" style="color:#ffffff;"> </span><span class="pun" style="color:#ffffff;">?</span><span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">" < > |</span>

4 完整的使用例子

4.1 例子一

网站根目录是："D://apache/www/" 配置项 imagePathFormat 的值为：

<span class="pln" style="color:#ffffff;"> imagePathFormat </span><span class="pun" style="color:#ffffff;">=</span><span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">"/ueditor/php/upload/image/{yyyy}-{mm}-{dd}_{rand:6}_{filename}"</span><span class="pln" style="color:#ffffff;"> </span>

上传的文件名可能是这样：

<span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">"2014-06-13_712623_照片.jpg"</span><span class="pln" style="color:#ffffff;"> </span>

存放的路径是：

<span class="pln" style="color:#ffffff;"> D</span><span class="pun" style="color:#ffffff;">:</span><span class="com" style="color:#87ceeb;">//apache/www/ueditor/php/upload/image</span>

4.1 例子二

假设例子的情景如下：

网站根目录是："D://apache/www/"

上传文件名称是："123.jpg"

上传日期是：2014年06月13日

配置项 imagePathFormat 和 imageUrlPrefix 的值为：

<span class="pln" style="color:#ffffff;">imagePathFormat</span><span class="pun" style="color:#ffffff;">:</span><span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">"/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"</span><span class="pun" style="color:#ffffff;">,</span><span class="pln" style="color:#ffffff;">imageUrlPrefix</span><span class="pun" style="color:#ffffff;">:</span><span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">"http://a.com"</span>

那么上传结果可能是这样：

上传文件命名为 "1402637667260888888.jpg"

文件上传到 "D://apache/www/ueditor/php/upload/image/20140613/" 目录下

后端返回给前端的图片链接是:

<span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">"/ueditor/php/upload/image/20140613/402637667260888888.jpg"</span>

插入到编辑器的图片链接是:

<span class="pln" style="color:#ffffff;"> </span><span class="str" style="color:#ffa0a0;">"http://a.com/ueditor/php/upload/image/20140613/402637667260888888.jpg"</span>