Home >Backend Development >PHP Tutorial >html5 - UMeditor thinkphp上传图片出错

html5 - UMeditor thinkphp上传图片出错

WBOY
WBOYOriginal
2016-06-06 20:16:271403browse

html5 - UMeditor thinkphp上传图片出错

显示“上传出错” 但其实已经上传成功了图片

页面配置如下

<code>
<script type="text/javascript">
    {/* 实例化编辑器 */}
    $(function() {
        var um = UM.getEditor('content', {
            toolbar: ['source bold italic underline insertorderedlist insertunorderedlist  forecolor emotion image video '],
            UEDITOR_HOME_URL: "__PUBLIC__/using/umeditor",   //设置的是编辑器源码存放的目录
            imageUrl: "{:U('Goods/upload')}",   //设置的是接收控制器方法。
            imagePath: "__ROOT__/Uploads/attach/",  //设置的是文件保存的目录
            //autoClearinitialContent: true,   // 当鼠标焦点在输入框里面,是否自动清理Umeditor里面已定义的{$topic.content}。
            wordCount: false,
            elementPathEnabled: false,
            autoFloatEnabled: false,
            textarea: 'content'
        });
    });

</script></code>

thinkphp控制器 图片处理如下:图片已经上传成功

<code> public function upload()
    {
        //$this->checkLogin();//检测用户是否登录,需要另外写~
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize = 5 * 1024 * 1024;// 设置附件上传允许的大小            $upload->autoSub  = true;
        $upload->saveName = array('uniqid', '');
        $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath = 'Uploads/attach/'; // 设置附件上传根目录
        //$upload->savePath = '';  // 设置附件上传(子)目录
        $upload->subName = array('date', 'Ymd'); //按年月日生成目录
        // 上传文件
        $info = $upload->upload();
        if ($info) {
            // 上传成功 获取上传文件信息
            foreach ($info as &$file) {
                //拼接出文件相对路径
                $file['filepath'] = $file['savepath'] . $file['savename'];
            }
            //返回json数据被百度Umeditor编辑器
            echo json_encode(array(
                'url' => $file['filepath'],
                'title' => htmlspecialchars($_POST['pictitle'], ENT_QUOTES), 'original' => $file['savename'],
                'state' => 'SUCCESS'
            ));
        } else {
            // 上传失败
            echo json_encode(array('state' => $upload->getError()));
        }
    }</code>

回复内容:

html5 - UMeditor thinkphp上传图片出错

显示“上传出错” 但其实已经上传成功了图片

页面配置如下

<code>
<script type="text/javascript">
    {/* 实例化编辑器 */}
    $(function() {
        var um = UM.getEditor('content', {
            toolbar: ['source bold italic underline insertorderedlist insertunorderedlist  forecolor emotion image video '],
            UEDITOR_HOME_URL: "__PUBLIC__/using/umeditor",   //设置的是编辑器源码存放的目录
            imageUrl: "{:U('Goods/upload')}",   //设置的是接收控制器方法。
            imagePath: "__ROOT__/Uploads/attach/",  //设置的是文件保存的目录
            //autoClearinitialContent: true,   // 当鼠标焦点在输入框里面,是否自动清理Umeditor里面已定义的{$topic.content}。
            wordCount: false,
            elementPathEnabled: false,
            autoFloatEnabled: false,
            textarea: 'content'
        });
    });

</script></code>

thinkphp控制器 图片处理如下:图片已经上传成功

<code> public function upload()
    {
        //$this->checkLogin();//检测用户是否登录,需要另外写~
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize = 5 * 1024 * 1024;// 设置附件上传允许的大小            $upload->autoSub  = true;
        $upload->saveName = array('uniqid', '');
        $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath = 'Uploads/attach/'; // 设置附件上传根目录
        //$upload->savePath = '';  // 设置附件上传(子)目录
        $upload->subName = array('date', 'Ymd'); //按年月日生成目录
        // 上传文件
        $info = $upload->upload();
        if ($info) {
            // 上传成功 获取上传文件信息
            foreach ($info as &$file) {
                //拼接出文件相对路径
                $file['filepath'] = $file['savepath'] . $file['savename'];
            }
            //返回json数据被百度Umeditor编辑器
            echo json_encode(array(
                'url' => $file['filepath'],
                'title' => htmlspecialchars($_POST['pictitle'], ENT_QUOTES), 'original' => $file['savename'],
                'state' => 'SUCCESS'
            ));
        } else {
            // 上传失败
            echo json_encode(array('state' => $upload->getError()));
        }
    }</code>

分两步确认问题:

  1. chrome工具里看下upload最终响应的json是不是success?格式是不是对的?有没有空格、换行?有没有utf-8 bom头?

  2. 如果json是对的,回来跟踪umeditor里上传出错是哪里提示的,利用IDE或编辑器的搜索功能快速查找并定位输出,然后跟踪JS判断条件,排查代码

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn