ueditor富文字編輯器跨域上傳圖片解決辦法

UEditor · 發表 2018-09-29 09:31:00

摘要：在使用百度富文字編輯器的過程中,如果是有一臺單獨的圖片伺服器就需要將上傳的圖片內容放到圖片伺服器,也就是比如在a.com的編輯器上傳圖片,圖片要儲存到img.com的跨域上傳圖片功能,而在ueditor官方文件中說不支援單圖上傳的跨域, 網上查了一下各種花裡胡哨,一頓操作猛如虎,比如加do...

在使用百度富文字編輯器的過程中,如果是有一臺單獨的圖片伺服器就需要將上傳的圖片內容放到圖片伺服器,也就是比如在a.com的編輯器上傳圖片,圖片要儲存到img.com的跨域上傳圖片功能,而在ueditor官方文件中說不支援單圖上傳的跨域,

網上查了一下各種花裡胡哨,一頓操作猛如虎,比如加document.domain,配置全域名的等等都是然並卵,我仔細研究了一下ueditor的demo檔案,相出了一個折中辦法,很簡單隻需要修改demo中兩個地方的程式碼外加寫一個上傳介面即可.

首先引入頁面ueditor編輯器,這裡不多說,可以參考之前的一篇部落格: ofollow,noindex">Html引入百度富文字編輯器ueditor ,這裡預設你已經實現了ueditor的引入如下圖:

1.此時你上傳的圖片都是儲存在本地的,如果想要跨域傳到其它伺服器，需要在ueditor/php/config.json配置檔案中的圖片配置項 imageUrlPrefix 加上域名,這樣你在上傳完圖片之後返回給你的就是全路徑的圖片,

在任何地方都可以顯示,我這裡以客戶端a.com通過編輯器上傳圖片到img.com上,所以 imageUrlPrefix 配置為http://img,com:

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']; //重置要返回給ueditor的圖片路徑,這一步可以讓圖片在編輯器內正常顯示圖片
}

3.改完這兩個地方之後就是自己寫一個上傳圖片的介面啦，比較簡單也有一堆的例子，我這裡就不貼出來了，這樣三步下來不出意外已經可以跨域上傳圖片了，無論是單圖還是多圖都可以，既簡單又方便！！！

ueditor富文字編輯器跨域上傳圖片解決辦法

您可能也會喜歡…