【UEditor】远程上传图片到【七牛云存储】
杂谈:最近在玩一个第三方的微信开发平台,里面的图片都是上传到【七牛云存储】的,用了一下非常的好用,支持各种语言,SDK齐全。支持全分布式系统架构以及存储技术和数据加速,于是决定将网站的图片都存储到七牛上(之前存储在本地服务器,不仅耗费流量,而且占空间,像我准备使用新浪云SAE,没有备案的话要消耗双倍的云豆,晕死)。如果和我一样希望把你的图片存储到海量云空间的朋友,请继续往下看,高手请掠过·····。
言归正传:这里直接贴出修改好的代码 和 操作步骤。想详细研究的童鞋可以登录七牛的官网查看 http://developer.qiniu.com/docs/v6/index.html
请自行下载:我使用的是php,其他语言的原理相同,请参考七牛SDK自行修改。
1.百度UEditor编辑器:点击下载 (版本:1.3.6 utf-8版)
2.七牛SDK(php版本):点击下载 (版本 :V6.1.9)
-----------------------------------------------------------------------------------
本地开发的话
首先要开启php扩展 php_curl 我使用的是WAMP 很方便 可自行找到php.ini文件 取消 php_curl 模块之前的注释
在测试七牛接口的时候报错 Fatal error: Call to undefined function curl_init()
解决办法:
1、在php.ini中找到extension=php_curl.dll,去掉前面的,php.ini一般在c:\windows下面。 2、在php.ini中找到extension_dir = "ext",去掉前面的;,改为extension_dir = "C:\php5\ext"。 "C:\php5\ext"只是示例,即扩展指向的路径要对 3、php_curl.dll、libeay32.dll、ssleay32.dll、php5ts.dll都拷到system32下面去。重启apache服务
步骤:
1.申请七牛空间 假设创建一个名称为abc的空间
取得 域名:abc.qiniudn.com ,
开发者平台-->帐号设置 里面取得:Ak SK
2.解压SDK,将qiniu 文件夹copy到 ueditor\php\ 目录下 如图:
2.修改 ueditor.config.js
只需要修改一个地方找到 ,imagePath:"" 设置为空串 因为前台使用的都是七牛给的绝对路径(URI) 不需要加本项目的修正前缀
还是贴个图吧
3.修改 Uploader.class.php
(1)给 $stateMap 数组添加一个元素:错误提示 为了国际化采用了unicode编码 (不需要提示错误这一步可省略)
//"QINIU" => "远程上传失败"
'QINIU'=> '\u8fdc\u7a0b\u4e0a\u4f20\u5931\u8d25',
(2)修改 private function upFile( $base64 )
这里贴出修改后的全部代码,里面的注视代码请忽略,留下是为了后续修改方便阅读 (假设:仓库名为 abc)
/** * 上传文件的主处理方法 * @param $base64 * @return mixed */ private function upFile( $base64 ) { //处理base64上传 if ( "base64" == $base64 ) { $content = $_POST[ $this->fileField ]; $this->base64ToImage( $content ); return; } //处理普通上传 $file = $this->file = $_FILES[ $this->fileField ]; if ( !$file ) { $this->stateInfo = $this->getStateInfo( 'POST' ); return; } if ( $this->file[ 'error' ] ) { $this->stateInfo = $this->getStateInfo( $file[ 'error' ] ); return; } if ( !is_uploaded_file( $file[ 'tmp_name' ] ) ) { $this->stateInfo = $this->getStateInfo( "UNKNOWN" ); return; } $this->oriName = $file[ 'name' ]; $this->fileSize = $file[ 'size' ]; $this->fileType = $this->getFileExt(); if ( !$this->checkSize() ) { $this->stateInfo = $this->getStateInfo( "SIZE" ); return; } if ( !$this->checkType() ) { $this->stateInfo = $this->getStateInfo( "TYPE" ); return; } //上传图片到云端 start require_once("qiniu/io.php"); require_once("qiniu/rs.php"); $bucket = "abc"; //仓库名 //截取原始文件后缀名 $key1 = "Uploads/".time().mt_rand(10,99).$this->getFileExt(); $accessKey = '填写你的AK'; $secretKey = '填写你的SK'; Qiniu_SetKeys($accessKey, $secretKey); $putPolicy = new Qiniu_RS_PutPolicy($bucket); $upToken = $putPolicy->Token(null); $putExtra = new Qiniu_PutExtra(); $putExtra->Crc32 = 1; //$file[ "tmp_name" ] ueditor上传的临时文件路径 list($ret, $err) = Qiniu_PutFile($upToken, $key1, $file[ "tmp_name" ], $putExtra); //成功返回$ret //array // 'hash' => string 'FsgE4pr0atgeRut7zwam2kw1-DSB' (length=28) // 'key' => string 'Uploads/139964935320' (length=20) //失败返回$err // object(Qiniu_Error)[6] // public 'Err' => string 'no such bucket' (length=14) // public 'Reqid' => string 'hSsAAA2QUiTHjWwT' (length=16) // public 'Details' => string '' (length=0) // public 'Code' => int 631 //不能随便输出 否则上传进度条无法完成 // echo "====> Qiniu_PutFile result: \n"; // if ($err !== null) { // var_dump($err); // } else { // var_dump($ret); // } //end //判断保存是否成功 //将完整的路径返回给前端 img[src] // $this->fullName = $this->getFolder() . '/' . $this->getName(); $this->fullName = "http://abc.qiniudn.com/".$key1; // if ( $this->stateInfo == $this->stateMap[ 0 ] ) { // if ( !move_uploaded_file( $file[ "tmp_name" ] , $this->fullName ) ) { // $this->stateInfo = $this->getStateInfo( "MOVE" ); // } // } }
这样就大功告成了 ,非常的简单。上面的代码没有判断之前添加的错误码 QINIU 需要可自行判断。
成功会返回 $ret 数组
失败会返回 $err 数组
并且最后一定要将完整的文件路径返回给前端:
$this->fullName = "http://abc.qiniudn.com/".$key1;