ueditor富文本編輯器如何實現跨域上傳圖片

本篇文章主要介紹了在ueditor富文本編輯器實現跨域上傳圖片的方法過程，有興趣的朋友可以了解一下，希望對你有幫助。

在使用百度富文本編輯器上傳圖片的過程中,如果是有一台單獨的圖片伺服器就需要將上傳的圖片放到圖片伺服器,比如在a.com的編輯器中上傳圖片,圖片要保存到img.com,這就涉及到跨域上傳圖片,而在ueditor官方文檔中說不支持單圖上傳的跨域,網上查了一下各種花里胡哨,一頓操作猛如虎,比如加document .domain,配置全域名的等等都是然並卵,沒搞清楚什麼是跨域就敢定義為跨域,仔細研究了一下ueditor的demo檔,想出了一個折中辦法,很簡單只需要修改demo中兩個地方的程式碼外加寫一個上傳介面即可:

先介紹頁面ueditor編輯器,這裡不多說,可以參考之前的一篇文章:#Html怎麼插入百度富文本編輯器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富文本編輯器如何實現跨域上傳圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！