Listening to the Words

百度编辑器实现图片上传阿里云OSS

《百度编辑器实现图片上传阿里云OSS》

百度编辑器PHP版(Ueditor)上传图片依赖于方法: php/imageUp.php
因此找到方法路径:

《百度编辑器实现图片上传阿里云OSS》

添加自定义标签

image.html

 var imageUrls = [],          //用于保存从服务器返回的图片信息数组
 selectedImageCount = 0,  //当前已选择的但未上传的图片数量
 savePathComplete = false, //保存目录已经就绪
 params = baidu.json.stringify({
 "fileNameFormat":editor.options.fileNameFormat,
 "uploadTags":editor.key   //此处添加自定义标签

});
utils.domReady(function(){
var flashOptions = {
container:"flashContainer",                                                    //flash容器id
url:editor.options.imageUrl,                                           // 上传处理页面的url地址
ext:params,                                 //可向服务器提交的自定义参数列表
fileType:'{"description":"'+lang.fileType+'", "extension":"*.gif;*.jpeg;*.png;*.jpg"}',     //上传文件格式限制
flashUrl:'imageUploader.swf',                                                  //上传用的flash组件地址
width:608,          //flash的宽度
height:272,         //flash的高度
gridWidth:121,     // 每一个预览图片所占的宽度
gridHeight:120,    // 每一个预览图片所占的高度
picWidth:100,      // 单张预览图片的宽度
picHeight:100,     // 单张预览图片的高度
uploadDataFieldName:editor.options.imageFieldName,    // POST请求中图片数据的key
picDescFieldName:'pictitle',      // POST请求中图片描述的key
maxSize:4,                         // 文件的最大体积,单位M
compressSize:2,                   // 上传前如果图片体积超过该值,会先压缩,单位M
maxNum:32,                         // 单次最大可上传多少个文件
compressSide:editor.options.compressSide,                 //等比压缩的基准,0为按照最长边,1为按照宽度,2为按照高度
compressLength:editor.options.maxImageSideLength        //能接受的最大边长,超过该值Flash会自动等比压缩
};

图片上传初始化时,自定义参数就会通过js异步的传到imageUp.php

imageUp.php上传配置

//这是本地上传的配置路径
 $config = array(
    "savePath" => $imgSavePathConfig,
    "maxSize" => 1000, //单位KB
    "allowFiles" => array(".gif", ".png", ".jpg", ".jpeg", ".bmp"),
    "fileNameFormat" => $_POST['fileNameFormat'],
    "aliossuploadTags" => $_POST['uploadTags']   //判断是否上传oss的依据(自定义的便签标签属性)
);

配置加载完成后,实例化Uploader类

//生成上传实例对象并完成上传
$up = new Uploader("upfile", $config);

Uploader->upFile();

 if ($this->stateInfo == $this->stateMap[0]) {
 /**
 * 修改,如果标签通过检测使用oss上传
 */
 //此处是核心,判断当前编辑器所在场景是否需要上传至OSS
 if (check_upload_auth($this->config['aliossuploadTags'])) {  
     $filename = $this->getOssFolder() . '/' . $this->getName();
     //封装oss上传类返回图片链接
     $result_arr = oss_upload_backend($filename, $file['tmp_name']);
 if ($result_arr['code'] == 1) {
     $this->fullName = $result_arr['url'];
 } else {
     $this->stateInfo = $this->getStateInfo("UPLOAD_FAILED");
 }
} else {
    $this->fullName = $this->getFolder() . '/' . $this->getName();
if (!move_uploaded_file($file["tmp_name"], $this->fullName)) {
    $this->stateInfo = $this->getStateInfo("MOVE");
    }
}

    }

修改初始配置

由于图片返回时网络图片路径,但是编辑器仍会为每个链接加上配置路径.ueditor.config.js

,imagePath: URL + "php/"  

但在配置修改为:

,imagePath:""  

又会导致本地上传后加载图片找不到路径,因此方法是在引入百度编辑器页面出增加初始化代码:

//$input_name 这个即时传入的标签名字
 <script type="text/javascript">
    UE.getEditor("'.$input_name.'",{
    theme:"default", //皮肤
    lang:"zh-cn",    //语言
    initialFrameWidth:1000,  //初始化编辑器宽度,默认650
    initialFrameHeight:350,//初始化编辑器高度,默认180
    imagePath:"" //此处初始化时,设置图片默认路径
    });
    </script>

判断标签

//根据后台配置为需要上传OOS的业务场景配置一个标签$apps_tags,
//当需要上传oss时,
function check_upload_auth($apps_tags)
{
    $oss = unserialize($GLOBALS['_CFG']['save_picture']);
    if ($oss['space'] == 1) {
        if (in_array($apps_tags, $oss['select_key']['0'])) {
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }
}
点赞