Heim > Web-Frontend > HTML-Tutorial > Wie der Rich-Text-Editor ueditor den domänenübergreifenden Upload von Bildern implementiert

Wie der Rich-Text-Editor ueditor den domänenübergreifenden Upload von Bildern implementiert

little bottle
Freigeben: 2019-04-24 16:12:50
nach vorne
4051 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Methode und den Prozess des domänenübergreifenden Hochladens von Bildern im Ueditor-Rich-Text-Editor vor. Ich hoffe, dass er für Sie hilfreich ist.

Wenn Sie beim Hochladen von Bildern mit dem Baidu Rich Text Editor einen separaten Bildserver haben, müssen Sie die hochgeladenen Bilder auf dem Bildserver ablegen, z. B. beim Hochladen von Bildern im a.com-Editor Das Bild muss auf img.com gespeichert werden, was das domänenübergreifende Hochladen von Bildern beinhaltet, und in der offiziellen Dokumentation von ueditor heißt es, dass das domänenübergreifende Hochladen einzelner Bilder nicht unterstützt wird. Ich habe online alle möglichen Schnickschnack überprüft Der Vorgang ist so heftig wie ein Tiger, wie das Hinzufügen einer .domain eines Dokuments, das Konfigurieren des vollständigen Domainnamens usw. Ich habe es gewagt, es als domänenübergreifend zu definieren, ohne zu wissen, was domänenübergreifend ist Die Demodatei von ueditor hat einen Kompromiss gefunden. Es ist sehr einfach und muss nur den Code an zwei Stellen in der Demo ändern und eine Upload-Schnittstelle schreiben:

Stellen Sie zuerst den Seiten-ueditor-Editor vor Ich gehe hier nicht auf Details ein. Sie können auf einen früheren Artikel verweisen: So fügen Sie den Baidu-Rich-Text-Editor ueditor in HTML ein , hier haben Sie standardmäßig die Einführung von ueditor implementiert wie unten gezeigt:

1. Zu diesem Zeitpunkt werden die von Ihnen hochgeladenen Bilder lokal gespeichert, wenn Sie sie domänenübergreifend auf andere Server übertragen möchten , müssen Sie das Bildkonfigurationselement imageUrlPrefix in der Konfigurationsdatei ueditor/php/config.json hinzufügen, damit Ihnen nach dem Hochladen des Bildes der vollständige Pfad zurückgegeben wird Bild, das überall angezeigt werden kann. Hier verwende ich den Client a.com, um das Bild über den Editor auf img.com hochzuladen. Daher ist imageUrlPrefix als http://img.com konfiguriert muss der vollständige Domänenname mit http:// sein:

2 .Nach dem Ändern des Zugriffspfads müssen Sie auch den ändern ueditor/php/Uploader.class.php und finden Sie die Methode upFile() . Diese Methode ist die Hauptverarbeitungsmethode zum Hochladen von Dateien in der Demo. Was ist besser, als diese Upload-Methode zu ändern? Das Hinzufügen von js ist einfacher und verständlicher. Auch wenn mehrere Seiten eingeführt werden, gibt es kein Problem:

  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']; //重置要返回给编辑器窗口的图片路径,这一步可以让图片在编辑器内正常显示图片
    }
Nach dem Login kopieren

3 Nachdem Sie diese beiden Stellen geändert haben, schreiben Sie es selbst. Eine Schnittstelle zum Hochladen Die obige Anforderungsadresse ist relativ einfach und ich werde sie hier nicht veröffentlichen. Auf diese Weise können Sie Bilder in drei Schritten hochladen Ganz gleich, ob es sich um ein einzelnes Bild oder mehrere Bilder handelt, es ist einfach, leicht verständlich und praktisch! ! !

Verwandte Tutorials: HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie der Rich-Text-Editor ueditor den domänenübergreifenden Upload von Bildern implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage