ueditor富文本编纂器怎样实现跨域上传图片
在使用baidu富文本编纂器上传图片的历程中,假如是有一台独自的图片效劳器就需要将上传的图片放到图片效劳器,比方在a.com的编纂器中上传图片,图片要留存到img.com,这就触及到跨域上传图片,而在ueditor官方文档中说不支撑单图上传的跨域,网上查了一下各种花狸狐哨,一顿操纵猛如虎,比方加document.domain,配置全域名的等等都是然并卵,没搞分明什么是跨域就敢定义为跨域,细心研讨了一下ueditor的demo文件,想出了一个折中方法,很简便只需要修改demo中两个地方的代码外加写一个上传接口即可:
第一引入页面ueditor编纂器,这里不多说,可以参照 此前的一篇文章:Html如何插入baidu富文本编纂器ueditor ,这里默许你已经实现了ueditor的引入如下图:
1.此时你上传的图片都是留存在当地的,假如想要跨域传到其它效劳器，需要在ueditor/php/config.json配置文件中的图片配置项imageUrlPrefix加上域名,这样你在上传完图片之后返回给你的就是全途径的图片,在任何地方都可以显示,我这里以客户端a.com通过编纂器上传图片到img.com上,所以imageUrlPrefix配置为http://img.com,留意必需是带http://的全域名:
2.修改完拜访途径还需要修改ueditor/php/Uploader.class.php文件,寻到 upFile() 办法,此办法就是demo中上传文件的主处置办法,修改这个上传办法比做什么代理页面、加js什么的更简便也更好懂得,就算多个页面引入也没得问题:
private function upFile()
{
$file = $this->file = $_FILES[$this->fileField];
if (!$file) {
$this->stateInfo = $this->getStateInfo("ERROR_FILE_NOT_FOUND");
return;
}
if ($this->file['error']) {
$this->stateInfo = $this->getStateInfo($file['error']);
return;
} else if (!file_exists($file['tmp_name'])) {
$this->stateInfo = $this->getStateInfo("ERROR_TMP_FILE_NOT_FOUND");
return;
} else if (!is_uploaded_file($file['tmp_name'])) {
$this->stateInfo = $this->getStateInfo("ERROR_TMPFILE");
return;
}
$this->oriName = $file['name'];
$this->fileSize = $file['size'];
$this->fileType = $this->getFileExt();
$this->fullName = $this->getFullName();
$this->filePath = $this->getFilePath();
$this->fileName = $this->getFileName();
$dirname = dirname($this->filePath);
//检查文件大小可否超出限制
if (!$this->checkSize()) {
$this->stateInfo = $this->getStateInfo("ERROR_SIZE_EXCEED");
return;
}
//检查可否不同意的文件格局
if (!$this->checkType()) {
$this->stateInfo = $this->getStateInfo("ERROR_TYPE_NOT_ALLOWED");
return;
}
//创立名目失败
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];
}
/**
*此处上面的代码都是demo内的源代码不需要改,下面才是我加上的需要敲黑板划重点的地方,说一下思绪,上面的代码会在当地生成上传的图片内容,然后我们就可以拿到上传的文件的全途径,
*拿到全途径再调取事先封装好的上传接口上传到图片效劳器即可,由于第一步配置了图片效劳器的域名,所以最后返回给编纂器窗口的图片途径已经是带域名的全途径啦
*/
$imgPath = '@'.$dirname.'/'.$this->fileName;//猎取生成的当地文件完全途径
//发送恳求的参数
$data = [
'myFile'=>$imgPath,
'imgType'=>4
];
$serverUrl = 'http://img.com/api/image.action'; //恳求地址
$ch = curl_init(); //初始化
curl_setopt($ch, CURLOPT_URL, $serverUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
//https和谈需要以下两行，不然恳求不成功
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
//post办法所需要的参数
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HTTPHEADER, array());
$result = curl_exec($ch);
curl_close($ch);
$result = json_decode($result,true); //将接口返回的json数据转为数组
$this->fullName = $result['imgUrlNormal']; //重置要返回给编纂器窗口的图片途径,这一步可以让图片在编纂器内正常显示图片
}3.改完这两个地方之后,再本人写一个上传图片的接口啦,将上面的恳求地址缓存你的接口地址,比力简便也有一堆的例子,我这里就不贴出来了,这样三步下来不出不测已经可以跨域上传图片了,不管是单图还是多图都可以,既简便好懂得又利便！！！
相关教程：HTML视频教程
以上就是ueditor富文本编纂器怎样实现跨域上传图片的具体内容，更多请关注百分百源码网其它相关文章！
