ueditor リッチ テキスト エディターが画像のクロスドメイン アップロードを実装する方法

この記事では、ueditor リッチテキストエディターでドメインを越えて画像をアップロードする方法と手順を中心に紹介しますので、興味のある方はぜひ参考にしてみてください。

Baidu リッチ テキスト エディターを使用して画像をアップロードするプロセスで、別の画像サーバーがある場合は、a.com のエディターに画像をアップロードするなど、アップロードされた画像を画像サーバーに配置する必要があります。画像は img.com に保存する必要があり、これには画像のクロスドメイン アップロードが含まれますが、ueditor の公式ドキュメントには、単一画像のクロスドメイン アップロードはサポートされていないと記載されています。ドキュメントの追加など操作は虎のように激しいです .domainやフルドメイン名の設定などはどれも同じです クロスドメインが何なのかよく分からないまま、あえてクロスドメインと定義してみましたueditor のデモ ファイルを研究し、妥協点を考え出しました。非常にシンプルで、必要なのはデモの 2 か所のコードを変更し、アップロード インターフェイスを記述するだけです:

最初に、ページ ueditor エディタを紹介します。詳細についてはここでは説明しません。以前の記事を参照してください:Baidu リッチ テキスト エディター ueditor を Html に挿入する方法、ここではデフォルトで次の導入が実装されています。以下に示すように ueditor:

1. 現時点では、アップロードした画像はローカルに保存されます。ドメインを越えて他の画像に転送したい場合は、サーバーの場合は、ueditor/php/config.json 構成ファイルにイメージ構成項目 imageUrlPrefix を追加する必要があります。ドメイン名なので、イメージをアップロードした後に返されるのは、ドメイン名です。どこにでも表示できる画像です。クライアント 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. この2箇所を変更した後、自分で書きます。画像をアップロードするためのインターフェイスです。上記のリクエスト アドレスをインターフェイス アドレスにキャッシュします。これは比較的簡単で、多くの例があります。ここでは掲載しません。このようにして、3 つのステップで、何もせずにドメイン間で画像をアップロードできます。一枚でも複数枚でも、簡単・分かりやすくて便利です！ ！ ！

関連チュートリアル: HTML ビデオ チュートリアル

###

以上がueditor リッチ テキスト エディターが画像のクロスドメイン アップロードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。