PHP结合Ueditor并修改图片上传路径

前言

在使用UEditor编辑器时,一般我们都是需要修改默认的图片上传路径的,下面是我整理好的修改位置和方法供大家参考。

操作

Ueditor PHP版本本身自带了一套上传程序,我们可以在此基础中,找到配置文件修改它。配置文件位置:

ueditor/php/config.json

内容如下:

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
  /* 上传图片配置项 */
  "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
  "imageFieldName": "upfile", /* 提交的图片表单名称 */
  "imageMaxSize": 2048000, /* 上传大小限制,单位B */
  "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
  "imageCompressEnable": true, /* 是否压缩图片,默认是true */
  "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
  "imageInsertAlign": "none", /* 插入的图片浮动方式 */
  "imageUrlPrefix": "", /* 图片访问路径前缀 */
  "imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                /* {time} 会替换成时间戳 */
                /* {yyyy} 会替换成四位年份 */
                /* {yy} 会替换成两位年份 */
                /* {mm} 会替换成两位月份 */
                /* {dd} 会替换成两位日期 */
                /* {hh} 会替换成两位小时 */
                /* {ii} 会替换成两位分钟 */
                /* {ss} 会替换成两位秒 */
                /* 非法字符 \ : * ? " < > | */
                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

  /* 涂鸦图片上传配置项 */
  "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
  "scrawlFieldName": "upfile", /* 提交的图片表单名称 */
  "scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "scrawlMaxSize": 2048000, /* 上传大小限制,单位B */
  "scrawlUrlPrefix": "", /* 图片访问路径前缀 */
  "scrawlInsertAlign": "none",

  /* 截图工具上传 */
  "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
  "snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */
  "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */

  /* 抓取远程图片配置 */
  "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
  "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
  "catcherFieldName": "source", /* 提交的图片列表表单名称 */
  "catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "catcherUrlPrefix": "", /* 图片访问路径前缀 */
  "catcherMaxSize": 2048000, /* 上传大小限制,单位B */
  "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */

  /* 上传视频配置 */
  "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
  "videoFieldName": "upfile", /* 提交的视频表单名称 */
  "videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "videoUrlPrefix": "", /* 视频访问路径前缀 */
  "videoMaxSize": 102400000, /* 上传大小限制,单位B,默认100MB */
  "videoAllowFiles": [
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */

  /* 上传文件配置 */
  "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
  "fileFieldName": "upfile", /* 提交的文件表单名称 */
  "filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "fileUrlPrefix": "", /* 文件访问路径前缀 */
  "fileMaxSize": 51200000, /* 上传大小限制,单位B,默认50MB */
  "fileAllowFiles": [
    ".png", ".jpg", ".jpeg", ".gif", ".bmp",
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
    ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
  ], /* 上传文件格式显示 */

  /* 列出指定目录下的图片 */
  "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
  "imageManagerListPath": "/ueditor/php/upload/image/", /* 指定要列出图片的目录 */
  "imageManagerListSize": 20, /* 每次列出文件数量 */
  "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */
  "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
  "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

  /* 列出指定目录下的文件 */
  "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
  "fileManagerListPath": "/ueditor/php/upload/file/", /* 指定要列出文件的目录 */
  "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */
  "fileManagerListSize": 20, /* 每次列出文件数量 */
  "fileManagerAllowFiles": [
    ".png", ".jpg", ".jpeg", ".gif", ".bmp",
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
    ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
  ] /* 列出的文件类型 */

}

从config.json内容中,我们不难看出(全部都有注释,看不出就见鬼了->_->),几乎所有的上传配置都是在这里。如果想修改上传路径,那么通过修改文件第 12 行就可以做到。

比如,这里我们修改 imagePathFormat :

代码如下:

"imagePathFormat": "/upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

保存,上传,测试,查看源码:

此时可以看出,修改是成功的。

总结

上传配置这款,会因ueditor版本不同,而稍有不同,我刚开始在用新版本时也没有反应过来,寻根索源才找到了这里,大家在修改的时候也要注意下哦。

另外,如果需要修改其他上传,如视频等,也可以在此处文件修改,道理都是一样的。

(0)

相关推荐

  • 百度ueditor组件上传图片后如何设置img里的alt属性

    百度ueditor组件,使用上传图片后,自动将上传图片显示在编辑器中,也就是插入了一个<img>标签.并设置了一个alt属性,其值是上传图片时的本地路径.暂时没发现哪里可以配置这个值.在查看发布的内容时,看到alt的值是一个磁盘路径,有点别扭. 可以在编辑完内容,保存到数据库时过滤下,修改alt的内容,也可以直接修改源码 function callback(){ try{ var link, json, loader, body = (iframe.contentDocument || ifr

  • UEditor 编辑器跨域上传解决方法

    解决的方法: 1.在 ueditor\dialogs\internal.js 加入 document.domain = '根域名'; 2.在当前页面同样指定根域名: 复制代码 代码如下: <script type="text/javascript">    document.domain = "根域名";</script> 这样在 chrome.firefox 下没有问题,但在 ie 下还需要简单修改下 UEditor,在 editor.js

  • 关于UEditor编辑器远程图片上传失败的解决办法

    远程图片上传是个很有意思的东西,比如你从别的网站复制一段文件,如果文字中带有图片,编辑器会自动将图片提取出来,进行上传,从而不用担心远程图片失效后,自己本地也无法浏览. 通过检查,发现远程图片上传的操作页面是:getRemoteImage.php .打开后我们先配置 savePath ,因为不同用户使用,需要存放到不同的目录,以免混乱,也方便管理 修改后代码: 复制代码 代码如下: //远程抓取图片配置 if(isset($_SESSION['admin'])){ $myPath = 'http

  • 关于jsp版ueditor1.2.5的部分问题解决(上传图片失败)

    1. 关于上传图片失败的问题 首先导入jar包 commons-fileupload-1.2.2.jar,ueditor.jar 然后修改editor_config.js 找到并修改 URL 修改为  window.UEDITOR_HOME_URL||"/mypro/ueditor/"  其中mypro是我的项目名称 imagePath 修改为 URL + "upload/"假设我们的图片存储路径是ueditor/upload/ 然后修改 imageUp.jspup

  • ueditor编辑器不能上传图片问题的解决方法

    ueditor是百度编辑器,在本地的iis环境是可以上传图片了,但放在服务器的iis环境无法上传图片了,经过搜索发现是iis设置问题,引起这个问题的主要原因是,大多数虚拟主机不会给IIS匿名账号访问磁盘上的非用户目录,连读取的权限都没有,既然我们不能解决iis问题只有从代码设置了,具体如下. 在上传不了图片时,可以用浏览器的自带的调试工具查看报错,你可以看一个"拒绝访问或文件已存在"的错误.仔细调试分析,终于找到问题所在. 在它的upload.class.asp中,有如下一个函数: P

  • UEditor编辑器自定义上传图片或文件路径的修改方法

    使用ueditor编辑器,附件默认在ueditor/php/upload/,  我的附件地址是网站根目录下/data/upload/ ,需要修改ueditor如下: 第一步:打开php/config.php修改图片目录 复制代码 代码如下: return array( //图片目录    'imageSavePath' => array (        '../../../../data/upload'    ) ); 第二步:图片上传后去掉相对路径php/imageUp.php 复制代码 代

  • PHP结合Ueditor并修改图片上传路径

    前言 在使用UEditor编辑器时,一般我们都是需要修改默认的图片上传路径的,下面是我整理好的修改位置和方法供大家参考. 操作 Ueditor PHP版本本身自带了一套上传程序,我们可以在此基础中,找到配置文件修改它.配置文件位置: ueditor/php/config.json 内容如下: /* 前后端通信相关的配置,注释只允许使用多行方式 */ { /* 上传图片配置项 */ "imageActionName": "uploadimage", /* 执行上传图片

  • vue-quill-editor 自定义工具栏和自定义图片上传路径操作

    背景: 1.某些场景下vue-quill-editor默认的工具栏部分功能不希望出现,需要删除部分功能. 2.vue-quill-editor默认提供的图片上传方案是将图片转成base64存放到内容区,这会导致content字符长度太长,不一定可以传到后台保存(其实即使可以保存也不推荐这种方案).所以我们需要将方案修改为将图片上传到服务器,然后通过URL的 方式访问到图片回显及使用. vue-quill-editor工具栏改造及自定义图片上传(这里使用的是element-ui的上传组件): 引入

  • Django框架文件上传与自定义图片上传路径、上传文件名操作分析

    本文实例讲述了Django框架文件上传与自定义图片上传路径.上传文件名操作.分享给大家供大家参考,具体如下: 文件上传 1.创建上传文件夹 在static文件夹下创建uploads用于存储接收上传的文件 在settings中配置, MEDIA_ROOT=os.path.join(BASE_DIR,r'static/uploads') 2.定义上传表单 <form action="{% url 'app:do_upload' %}" method="post"

  • vue+elementUi图片上传组件使用详解

    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non

  • 在SSM框架中将图片上传到数据库中的实现代码

    今天我们来看看SSM中如何将图片转换成二进制,最后传入到自己的数据库中,好了,废话不多说,我们开始今天的学习,我这里用的编辑器是IDEA 1.导入图片上传需要的jar依赖包 <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <

  • YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

    将Ueditor集成到YII框架中后,参照editor_config.js中的toolbars中的内容,更改options中标签可以给编辑器添加想要的功能: 因此要想添加文件和图片上传功能,应该加入以下两个标签: 文本编辑器中便出现了对应的两个选项: 但是点击上传图片按钮后发现,无法正常进行图片上传,文件上传也是失败的,问题都是Flash Player需要升级, 因此在火狐浏览器中安装对应的flash player组件,选择其中一个工作: 此时,文件上传和图片上传功能就能正常使用了: 上传路径的

  • ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例

    本文实例讲述了ThinkPHP5+UEditor图片上传到阿里云对象存储OSS.分享给大家供大家参考,具体如下: ThinkPHP5使用富文本UEditor,将富文本编辑框内上传在本地的图片,修改到阿里云对象存储OSS ThinkPHP5加载UEditor ···· 略 UEditor下载:https://ueditor.baidu.com/website/download.html#ueditor (或本站下载:https://www.jb51.net/codes/56667.html) 阿里

  • 如何解决SpringBoot集成百度UEditor图片上传后直接访问404

    SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下原因: 我们知道,如果使用类似 /upload/image/1.jpg 这种格式进行图片的访问的时候,SpringBoot读取的并不是本项目中直接的静态目录,而是在进行编译的时候生成target目录下的文件,如下图所示: 那么问题就来了,我们在运行的过程中上传一个图片的话,并不能重新加载当前这个项目

  • yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法

    我们接下来就来聊聊Yii2框架是如何整合百度编辑器umeditor的. umeditor是啥,我只听过ueditor,你这umeditor是不是盗版的东东喃?umeditor呢,说白了就是mini版的ueditor,按照百度官方说法,其实就是编辑器中的"短软小",但是功能俱全.咳咳,咱们回归正题. 首先勒,咱们先去官网下载一份mini版的ueditor umeditor,注意哦,是um editor. 下载下来解压放到项目根目录下面的 /css目录下 命名为umeditor,具体位置各

随机推荐