ueditor富文本编纂器怎样实现跨域上传图片-百分百源码网

ueditor富文本编纂器怎样实现跨域上传图片

发布时间：09/01 来源：未知浏览：关键词：

本篇文章主要介绍了在ueditor富文本编纂器实现跨域上传图片的办法历程，感乐趣的伴侣可以理解一下，但愿对你有所帮忙。本篇文章主要介绍了在ueditor富文本编纂器实现跨域上传图片的办法历程，感乐趣的伴侣可以理解一下，但愿对你有所帮忙。

在运用baidu富文本编纂器上传图片的历程中,要是是有一台独自的图片办事器就需要将上传的图片放到图片办事器,比方在a.com的编纂器中上传图片,图片要保留到img.com,这就波及到跨域上传图片,而在ueditor官方文档中说不支撑单图上传的跨域,网上查了一下各种花狸狐哨,一顿操纵猛如虎,比方加document.domain,配置全域名的等等都是然并卵,没搞分明什么是跨域就敢定义为跨域,细心研究了一下ueditor的demo文件,想出了一个折中方法,很简略只需要修改demo中两个地方的代码外加写一个上传接口即可:

第一引入页面ueditor编纂器,这里未几说,可以参照以前的一篇文章:Html怎么插入baidu富文本编纂器ueditor ,这里默许你已经实现了ueditor的引入如下图:

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富文本编纂器怎样实现跨域上传图片的细致内容，更多请关注百分百源码网其它相干文章！

打赏