百度富文本编辑器ueditor上传文件到bcs中
（不知为何，代码的排版总是不能自动对齐。有点纠结，各位将就看着）
近期在做一个个人博客，用到了百度的富文本编辑器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转存表单名若此处修改，需要在后台对应文件修改对应参数
经过以上更改，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');剪切至本文件的第一行，其他不变。
若有其他问题，请留言。