百度富文本编辑器ueditor上传文件到bcs中

来源：互联网发布：java button点击事件编辑：程序博客网时间：2024/04/28 02:53

（不知为何，代码的排版总是不能自动对齐。有点纠结，各位将就看着）

近期在做一个个人博客，用到了百度的富文本编辑器ueditor。博客是架在了bae中的。在测试的时候发现，上传的图片有时候不会或者是间接性地不会显现出来，特别诡异的是，我用ie内核的浏览器（比如360、ie、搜狗等）访问时与chrome和ff访问的结果不一样，即：有些图片在ie内核浏览器能够显示出来，在chrome或者ff中不能显示，反过来，有些图片能够在chrome或者ff中显示，但是在ie内核浏览器中不能显示。纠结于此，本人顾不得马上就要考试了，不断的到网上找资料，修改ueditor源代码，弄了一天，终于搞定了。现在把过程记录下，供大家参考，免得大家走弯路。

原来bae只提供代码部署，虽然也提供本地文件写入，但如果使用UEditor内的上传方式，图片只能保证暂时可以访问。过一段时间后就不一定能访问【1】。网上有人提出，可以将上传的文件存储到百度云存储（bcs）中，但给出的解决步骤差强人意，或者不全，或者不对，或者是针对非常老版的ueditor。本人拟详细记录如何实现通过ueditor上传文件到bcs中的步骤，所用到的ueditor是当前最新的版本：ueditor1_3_5，编程语言是php，搭建在百度开放云平台2.0中。

使用百度云存储服务进行开发的具体步骤如下【2】：

1. 注册百度账号，并成为百度开发者。这一步不详谈了，各位应该都知道。

2. #创建应用并获取密钥对（ak&sk）。进入管理中心-》应用管理-》服务管理-》我的密钥，若不存在密钥，则创建密钥对，若已经拥有密钥对了，则直接可用。

3. #创建bucket。进入管理中心-》云平台管理-》云存储-》我的bucket，点击创建bucket按钮，输入bucket名即可。本人的bucket名为：kangry-family

4. #上传文件。这一步仅仅只是做实验，便于大家对bucket有个了解。可以选择进入一个bucket，然后上传本地文件即可。

5. #权限设置。改权限设置可在多个粒度设置。一是bucket级别。对bucket右键-》属性-》公开读；另一个是文件级别，对文件右键-》属性-》公开读。我们只需要在bucket级别把权限设置为公开读即可。

6.下载bcs_sdk_php，地址为http://developer.baidu.com/wiki/index.php?title=docs/cplat/stor/sdk，当前版本为1.2.2。解压到项目文件夹下。假设放在文件夹的路径为INC_PATH。

7.修改INC_PATH.'Baidu-BCS_SDK-PHP-1.2.2/conf.inc.php'文件，将第2步的其中一对公钥和私钥定义为常量。如下所示。

<?php//AK 公钥define ( 'BCS_AK', '你的公钥' );//SK 私钥define ( 'BCS_SK', '你的私钥' );//superfile 每个object分片后缀define ( 'BCS_SUPERFILE_POSTFIX', '_bcs_superfile_' );//sdk superfile分片大小 ，单位 B（字节）define ( 'BCS_SUPERFILE_SLICE_SIZE', 1024 * 1024 );

8.假设udeitor在JS_PATH目录下。对于上传文件、图片、涂鸦的修改。前面几个版本估计没有封装好，所以【1】中所提供的方法并不适用。而我用的这个版本对文件上传封装成了一个类。故我们只需要修改：JS_PATH.'ueditor1_3_5-utf8-php/php/Uploader.class.php'文件。修改第67行upFile($base64)的函数。从第103行开始，改成如下代码即可：

//$this->fullName = $this->getFolder() . '/' . $this->getName();        $this->fullName = $this->getName();        if ( $this->stateInfo == $this->stateMap[ 0 ] ) {/**            if ( !move_uploaded_file( $file[ "tmp_name" ] , $this->fullName ) ) {                $this->stateInfo = $this->getStateInfo( "MOVE" );            }*/include_once(INC_PATH."Baidu-BCS_SDK-PHP-1.2.2/bcs.class.php"); //载入SDK$bucket = 'kangry-family'; //我已经在百度平台建好了这个bucket,就像创建目录一样$object = '/'.$this->fullName; //保存到百度云的文件名$fileUpload = $file[ "tmp_name" ]; //已经上传到我服务器的文件路径$baiduBCS = new BaiduBCS (); //创建百度云存储对象$response = $baiduBCS->get_bucket_acl( $bucket ); //选择指定的bucket,就像切换数据库,切换目录,创建bucket可以看百度SDK里的例子if ($response->isOK ()) { // 切换bucket成功$response = $baiduBCS->create_object ( $bucket, $object, $fileUpload ); //上传文件if (! $response->isOK ()) { //上传失败执行$this->stateInfo = $this->getStateInfo( "MOVE" );}$this->fullName='http://bcs.duapp.com/kangry-family/'.$this->fullName;}else{$this->stateInfo = $this->getStateInfo( "MOVE" );}        }

注意，若你会使用base64编码的图片上传，那么还需要修改base64ToImage($base64Data)函数。将之修改成如下：

    private function base64ToImage( $base64Data )    {        $img = base64_decode( $base64Data );        $this->fileName = time() . rand( 1 , 10000 ) . ".png";        //上传到百度云平台include_once(INC_PATH."Baidu-BCS_SDK-PHP-1.2.2/bcs.class.php"); //载入SDK$bucket = 'kangry-family'; //我已经在百度平台建好了这个bucket,就像创建目录一样$object = '/'. $this->fileName; //保存到百度云的文件名$baiduBCS = new BaiduBCS (); //创建百度云存储对象$response = $baiduBCS->get_bucket_acl( $bucket ); //选择指定的bucket,就像切换数据库,切换目录,创建bucket可以看百度SDK里的例子if ($response->isOK ()) { // 切换bucket成功$response = $baiduBCS->create_object_by_content ( $bucket, $object, $img ); //上传文件if (! $response->isOK ()) { //上传失败执行$this->stateInfo = $this->getStateInfo( "IO" );            return;}}else{$this->stateInfo = $this->getStateInfo( "IO" );            return;}/*$this->fullName = $this->getFolder() . '/' . $this->fileName;        if ( !file_put_contents( $this->fullName , $img ) ) {            $this->stateInfo = $this->getStateInfo( "IO" );            return;        }*/$this->fullName = 'http://bcs.duapp.com/kangry-family/' . $this->fileName;        $this->oriName = "";        $this->fileSize = strlen( $img );        $this->fileType = ".png";    }

9.修改远程抓取的图片（即图片搜索）相关代码。打开JS_PATH.'ueditor1_3_5-utf8-php/php/getRemoteImage.php'文件。修改该文件的getRemoteImage($uri,$config)函数，从75行代码开始，修改成如下：

/*            //创建保存位置            $savePath = $config[ 'savePath' ];            if ( !file_exists( $savePath ) ) {                mkdir( "$savePath" , 0777 );            }*/            //写入文件            //$tmpName = $savePath . rand( 1 , 10000 ) . time() . strrchr( $imgUrl , '.' );            $tmpName = time() . rand( 1 , 10000 ) .strrchr( $imgUrl , '.' );//上传到百度云平台include_once(INC_PATH."Baidu-BCS_SDK-PHP-1.2.2/bcs.class.php"); //载入SDK$bucket = 'kangry-family'; //我已经在百度平台建好了这个bucket,就像创建目录一样$object = '/'.$tmpName; //保存到百度云的文件名$baiduBCS = new BaiduBCS (); //创建百度云存储对象$response = $baiduBCS->get_bucket_acl( $bucket ); //选择指定的bucket,就像切换数据库,切换目录,创建bucket可以看百度SDK里的例子if ($response->isOK ()) { // 切换bucket成功$response = $baiduBCS->create_object_by_content ( $bucket, $object, $img ); //上传文件if (! $response->isOK ()) { //上传失败执行array_push( $tmpNames , "error" );}else{array_push( $tmpNames , 'http://bcs.duapp.com/kangry-family/'.$tmpName );}}else{array_push( $tmpNames , "error" );}/*            try {                $fp2 = @fopen( $tmpName , "a" );                fwrite( $fp2 , $img );                fclose( $fp2 );                array_push( $tmpNames ,  $tmpName );            } catch ( Exception $e ) {                array_push( $tmpNames , "error" );            }*/

10.修改在线图片管理相关代码。打开JS_PATH.'ueditor1_3_5-utf8-php/php/imageManager.php'文件。修改该文件第40行的getfiles($path, &files=array())函数如下：

    function getfiles( $path , &$files = array() )    {include_once(INC_PATH."Baidu-BCS_SDK-PHP-1.2.2/bcs.class.php"); //载入SDK$baiduBCS = new BaiduBCS (); //创建百度云存储对象$response = $baiduBCS->list_object( $path ); if($response->isOK ()){$objectListArr=json_decode($response->body,true);for($i=0;$i<$objectListArr["object_total"];$i++){if($objectListArr['object_list'][$i]['is_dir']==='0'){$objectName=$objectListArr['object_list'][$i]['object'];if ( preg_match( "/\.(gif|jpeg|jpg|png|bmp)$/i" , $objectName ) ) {                        $files[] = 'http://bcs.duapp.com/'.$path.$objectName;                    }}}}/*        if ( !is_dir( $path ) ) return null;        $handle = opendir( $path );        while ( false !== ( $file = readdir( $handle ) ) ) {            if ( $file != '.' && $file != '..' ) {                $path2 = $path . '/' . $file;                if ( is_dir( $path2 ) ) {                    getfiles( $path2 , $files );                } else {                    if ( preg_match( "/\.(gif|jpeg|jpg|png|bmp)$/i" , $file ) ) {                        $files[] = $path2;                    }                }            }        }*/        return $files;    }

同时还要修改第十三行代码为你的bucket名。如下：

    //$paths = array('upload/','upload1/');$paths=array('kangry-family');

11.修改前端配置。打开JS_PATH.'ueditor.config.js'，修改如下：

        //图片上传配置区        ,imageUrl:URL+"php/imageUp.php"             //图片上传提交地址        //,imagePath:URL + "php/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置,imagePath:" "                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置        //,imageFieldName:"upfile"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数        //,compressSide:0                            //等比压缩的基准，确定maxImageSideLength参数的参照对象。0为按照最长边，1为按照宽度，2为按照高度        //,maxImageSideLength:900                    //上传图片最大允许的边长，超过会自动等比缩放,不缩放就设置一个比较大的值，更多设置在image.html中        //,savePath: [ 'upload1', 'upload2', 'upload3' ]      //图片保存在服务器端的目录， 默认为空， 此时在上传图片时会向服务器请求保存图片的目录列表，                                                            // 如果用户不希望发送请求， 则可以在这里设置与服务器端能够对应上的目录名称列表                                                            //比如： savePath: [ 'upload1', 'upload2' ]        //涂鸦图片配置区        ,scrawlUrl:URL+"php/scrawlUp.php"           //涂鸦上传地址        //,scrawlPath:URL+"php/"                            //图片修正地址，同imagePat        ,scrawlPath:" "                            //图片修正地址，同imagePath        //附件上传配置区        ,fileUrl:URL+"php/fileUp.php"               //附件上传提交地址        //,filePath:URL + "php/"                   //附件修正地址，同imagePath        ,filePath:" "                   //附件修正地址，同imagePath        //,fileFieldName:"upfile"                    //附件提交的表单名，若此处修改，需要在后台对应文件修改对应参数        //远程抓取配置区        //,catchRemoteImageEnable:true               //是否开启远程图片抓取,默认开启        ,catcherUrl:URL +"php/getRemoteImage.php"   //处理远程图片抓取的地址        ,catcherPath:" "                  //图片修正地址，同imagePath        //,catchFieldName:"upfile"                   //提交到后台远程图片uri合集，若此处修改，需要在后台对应文件修改对应参数        //,separater:'ue_separate_ue'               //提交至后台的远程图片地址字符串分隔符        //,localDomain:[]                            //本地顶级域名，当开启远程图片抓取时，除此之外的所有其它域名下的图片都将被抓取到本地,默认不抓取127.0.0.1和localhost        //图片在线管理配置区        ,imageManagerUrl:URL + "php/imageManager.php"       //图片在线管理的处理地址        //,imageManagerPath:URL + "php/"                                    //图片修正地址，同imagePath        ,imageManagerPath:" "                                    //图片修正地址，同imagePath        //屏幕截图配置区        ,snapscreenHost: location.hostname                                 //屏幕截图的server端文件所在的网站地址或者ip，请不要加http://        ,snapscreenServerUrl: URL +"php/imageUp.php" //屏幕截图的server端保存程序，UEditor的范例代码为“URL +"server/upload/php/snapImgUp.php"”        ,snapscreenPath: " "        ,snapscreenServerPort: location.port                                   //屏幕截图的server端端口        //,snapscreenImgAlign: ''                                //截图的图片默认的排版方式        //word转存配置区        ,wordImageUrl:URL + "php/imageUp.php"             //word转存提交地址        ,wordImagePath:" "                       //        //,wordImageFieldName:"upfile"                     //word转存表单名若此处修改，需要在后台对应文件修改对应参数

因为后台返回的路径是http开头的绝对路径，因此ueditor.config.js中的imagePath、scrawPath等设为空格字符串（不是为空）【1】

经过以上更改，ok，大功告成！其中所有的kangry-family改成你自己的bucket名。若有问题，随时留言。

参考网址：【1】http://blog.csdn.net/auver/article/details/10103789

【2】http://developer.baidu.com/wiki/index.php?title=docs/cplat/stor/guide

【3】http://blog.csdn.net/ychzh2000/article/details/9129669

（本人还将ueditor和bcs整合成了一个整体了，下载地址：http://download.csdn.net/detail/wangshaner1/6812471）

你需要做的只是修改两个配置文件。

1、修改ueditor1_3_5-utf8-php-for-bcs/php/config.ueditor.for.bcs.1.0.php

define('BUCKET_NAME','');//更改成你的bucket名字define('BCS_SDK_PATH','./Baidu-BCS_SDK-PHP-1.2.2/');//bcs的sdk路径

2、修改ueditor1_3_5-utf8-php-for-bcs/php/config.ueditor.for.bcs.1.0.php/Baidu-BCS_SDK-PHP-1.2.2/conf.inc.php

//AK 公钥define ( 'BCS_AK', '' );//你的公钥//SK 私钥define ( 'BCS_SK', '' );//你的私钥

本人测试，下载的版本有个小问题，需要将ueditor1_3_5-utf8-php\php\imageManager.php的第43行代码include_once('config.ueditor.for.bcs.1.0.php');剪切至本文件的第一行，其他不变。

若有其他问题，请留言。

0 0