Ueditor自定义图片上传接口-PHP版

原创 2017年09月12日 14:54:57

百度的开源前端富文本编辑器Ueditor各种有着强大的功能,但是在实际项目中,往往不会把图片直接上传到后端服务器上,而是上传到图床或者CDN上,那么如何配置呢?

服务端代码分析

在ueditor目录的php目录下有下面这些文件
这里写图片描述

其中controller.php 是一个控制器文件,里面做了一个简单的路由,可以看到有一个uploadimage 路由到了action_upload.php

switch ($action) {
    case 'config':
        $result =  json_encode($CONFIG);
        break;

    /* 上传图片 */
    case 'uploadimage':
    /* 上传涂鸦 */
    case 'uploadscrawl':
    /* 上传视频 */
    case 'uploadvideo':
    /* 上传文件 */
    case 'uploadfile':
        $result = include("action_upload.php");
        break;

    /* 列出图片 */
    case 'listimage':
        $result = include("action_list.php");
        break;
    /* 列出文件 */
    case 'listfile':
        $result = include("action_list.php");
        break;

    /* 抓取远程文件 */
    case 'catchimage':
        $result = include("action_crawler.php");
        break;

    default:
        $result = json_encode(array(
            'state'=> '请求地址出错'
        ));
        break;
}

action_upload.php则实例化了Uploader.class.php的Uploader类,其中做的主要操作就是文件的移动操作

//创建目录失败
 if (!file_exists($dirname) && !mkdir($dirname, 0777, true)) {
     $this->stateInfo = $this->getStateInfo("ERROR_CREATE_DIR");
     return;
 } else if (!is_writeable($dirname)) {
     $this->stateInfo = $this->getStateInfo("ERROR_DIR_NOT_WRITEABLE");
     return;
 }

 //移动文件
 if (!(move_uploaded_file($file["tmp_name"], $this->filePath) && file_exists($this->filePath))) { //移动失败
     $this->stateInfo = $this->getStateInfo("ERROR_FILE_MOVE");
 } else { //移动成功
     $this->stateInfo = $this->stateMap[0];
 }

所以通过分析这个过程,我们可以看到,ueditor是在前端上传图片时调用了/controller.php?action=uploadimage这个接口,而我们要做的就是将移动文件操作修改为上传到远程图床或者CDN。

前端页面修改

在ueditor.all.js中有一个方法getActionUrl返回了不同操作对应的接口地址

/**
         * 根据action名称获取请求的路径
         * @method  getActionUrl
         * @remind 假如没有设置serverUrl,会根据imageUrl设置默认的controller路径
         * @param { String } action action名称
         * @example
         * ```javascript
         * editor.getActionUrl('config'); //返回 "/ueditor/php/controller.php?action=config"
         * editor.getActionUrl('image'); //返回 "/ueditor/php/controller.php?action=uplaodimage"
         * editor.getActionUrl('scrawl'); //返回 "/ueditor/php/controller.php?action=uplaodscrawl"
         * editor.getActionUrl('imageManager'); //返回 "/ueditor/php/controller.php?action=listimage"
         * ```
         */
        getActionUrl: function(action){
            var actionName = this.getOpt(action) || action,
                imageUrl = this.getOpt('imageUrl'),
                serverUrl = this.getOpt('serverUrl');

            if(!serverUrl && imageUrl) {
                serverUrl = imageUrl.replace(/^(.*[\/]).+([\.].+)$/, '$1controller$2');
            }

            if(serverUrl) {
                serverUrl = serverUrl + (serverUrl.indexOf('?') == -1 ? '?':'&') + 'action=' + (actionName || '');
                return utils.formatUrl(serverUrl);
            } else {
                return '';
            }
        }

那么我们只要在页面中重写这个方法,让它返回我们自己的上传图片接口地址就可以了
在编辑的页面中加入以下代码,其中当action等于uploadimage时调用我们自己的上传接口,否则走原有的ueditor的接口

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
 UE.Editor.prototype.getActionUrl = function(action) {
     if (action == 'uploadimage') {
         return '/mycontroller/uploadimage';
     } else {
         return this._bkGetActionUrl.call(this, action);
     }
 }

同时在初始化Ueditor时将远程抓取图片的功能关闭,否则会在复制粘贴时自动讲一个CDN上的图片抓取保存到本地服务器

var ue = UE.getEditor('container',{
                initialFrameHeight : 600,
                initialFrameWidth : 1500,
                catchRemoteImageEnable:false,
                })

编写后端接口

后端的PHP接口读取上传文件内容,然后调用图床或者CDN提供的上传接口就可以了,注意这里接口返回的数据格式应与Ueditor接口返回的相同,否则会报错

<?php
$file = $_FILES['upfile'];
if ($_FILES["file"]["error"] == 0) {
    //上传文件到CDN
    $res = array(
        "state"    => "",          //上传状态,上传成功时必须返回"SUCCESS"
        "url"      => "",            //CDN地址
        "title"    => "",          //新文件名
        "original" => "",       //原始文件名
        "type"     => "",           //文件类型
        "size"     => "",           //文件大小
    );
    echo json_encode($res);
}

这样当使用Ueditor的上传图片功能时,就会把图片上传到图床或者CDN了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

SugarCRM源码分析之缓存

本篇分析下SugarCRM的缓存,缓存文件主要存放在./include/SugarCache里,实例化主要是SugarCache::instance()方法来实现。

SugarCRM源码分析之国际化语言

本篇主要分析下SugarCRM中的语言包源码。

SugarCRM安装与初探

什么是SugarCRm?

sugarCRM安装

sugarCRM安装完没样式 空间必须支持fastCGI sugarcrm.log cache custom data modules themes ...

MediaWiki初探:安装及使用入门

http://blog.csdn.net/wangnan537/article/details/37743497?_t=t MediaWiki是著名的开源wiki引擎,全球最大的wiki项目维基...

开源免费CRM

什么是CRM? CRM就是客户(Customer)关系(Relationship)管理(Management). 当企业的业务繁忙的时候, 靠OUTLOOK和简单的单个人的报表显然不能满足日常业务的...
  • it_man
  • it_man
  • 2012-07-04 22:11
  • 12615

Ueditor HTML编辑器图片上传路径修改(php版)

1.ueditor.config.js 修改文件里面图片的上传路径。把imagePath设置为空。前面的URL去掉 在toolbars中添加insertimage,图片上传的图标 2.  打开PH...

UEditor进阶:修改图片上传的方式(JSP版)

当大家使用了UEditor之后,会发现其自带的图片上传方法只能存在项目当中,每当项目重新发布,之前的数据就无法自动保存。这个时候就需要我们修改图片上传方式,将图片保存在数据库或电脑的其他地方,从而解决...

【UEditor】php版的UEditor 1.3.x图片上传目录的设置,与上传插件的修改

UEditor的图片上传需要自己设置一下功能才能正常。同时,如下图所示,图片上传插件的“在线管理”、“图片搜索”等无意义的功能,需要自己手动根除一下。 还有,一般情况下,编辑器的图片...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)