ueditor 서식 있는 텍스트 편집기가 이미지의 도메인 간 업로드를 구현하는 방법

이 글은 주로 ueditor 서식 있는 텍스트 편집기에서 도메인 간에 이미지를 업로드하는 방법과 과정을 소개합니다. 관심 있는 친구들이 알아두면 도움이 될 것입니다.

Baidu Rich Text Editor를 사용하여 사진을 업로드하는 과정에서 별도의 사진 서버가 있는 경우 업로드된 사진을 사진 서버에 넣어야 합니다. img.com에 저장해야 하는데, 여기에는 이미지의 도메인 간 업로드가 포함되며, ueditor의 공식 문서에는 단일 이미지의 도메인 간 업로드가 지원되지 않는다고 나와 있습니다. 인터넷, document.domain 추가, 전체 도메인 이름 구성 등의 작업이 호랑이처럼 치열했습니다. ueditor의 데모 파일을 주의 깊게 연구한 결과 매우 간단합니다. 데모에서 두 개의 필드만 수정하면 됩니다. 여기에 코드를 추가하고 업로드 인터페이스를 작성하기만 하면 됩니다.

먼저 페이지 ueditor를 소개합니다. 편집기, 여기서 말할 것은 많지 않습니다. 이전 기사를 참조할 수 있습니다. Baidu 서식 있는 텍스트 편집기 ueditor에 Html을 삽입하는 방법, 여기 기본적으로 아래와 같이 ueditor 소개를 구현했습니다.

1. 이때 업로드한 이미지는 로컬에 저장됩니다. 도메인을 넘어 다른 서버로 전송하려면 ueditor/php/config에서 이미지 구성 항목 imageUrlPrefix을 구성해야 합니다. .json 구성 파일에 도메인 이름이 추가되므로 이미지를 업로드한 후 반환되는 것은 전체 경로 이미지이며 어디에서나 표시할 수 있습니다. 여기서는 클라이언트 a.com으로 편집합니다. 서버는 이미지를 업로드합니다. img.com이므로 imageUrlPrefix는 http://img.com으로 구성됩니다. http://:

2가 포함된 전체 도메인 이름이어야 합니다. ueditor/php/Uploader.class.php 파일을 수정하고 upFile() 메소드를 찾아야 합니다. 이 메소드는 데모에서 파일을 업로드하는 주요 처리 방법입니다. 이 업로드 방법을 수정하는 것이 프록시 페이지를 만드는 것보다 간단합니다. 또는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!