当前位置: 首页 > news >正文

Thinkphp5.1对接ueditor(自定义上传接口)

  • 一、前言
  • 二、下载 ueditor1_4_3_3-utf8-php 版本
    • 1、进入github
    • 2、点击 `25 tags`
    • 3、选择自己需要的ueditor版本 例`v1.4.3.3` 下载
    • 4、选择自己需要的后台语言版本
  • 三、先熟悉config.json的配置
  • 四、js 代码
  • 五、php上传代码,think5.1为例
  • 六、他山之石

一、前言

  • ueditor是强大,但是目前来说是没维护了,这里只是拿来练一下手。

二、下载 ueditor1_4_3_3-utf8-php 版本

1、进入github

  • 下载:UEditor Github 地址:http://github.com/fex-team/ueditor

2、点击 25 tags

在这里插入图片描述

3、选择自己需要的ueditor版本 例v1.4.3.3 下载

在这里插入图片描述

4、选择自己需要的后台语言版本

  • ueditor1_4_3_3-utf8-php.zip
    在这里插入图片描述

三、先熟悉config.json的配置

  • ***ActionName 是上传类型的路由;
  • ***FieldName 是上传表单的名称;
  • 他们的对应关系如下
名称actionNamefieldName
上传图片配置项uploadimageupfile
*********

四、js 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>uEditor加载Demo</title>
</head>
<body>
<!-- 富文本挂载元素 -->
<textarea id="uEditorID"></textarea>
</body>
<!-- 加载静态资源 -->
<script type="text/javascript" src="/js/ueditor1_4_3_3-utf8-php/utf8-php/ueditor.config.js"></script>
<script type="text/javascript" src="/js/ueditor1_4_3_3-utf8-php/utf8-php/ueditor.all.js"></script>
<script>
    //上传图片action
    let imageUploadAction = [
        'uploadimage', //上传图片配置项 imageActionName
        'uploadscrawl',//涂鸦图片上传配置项 scrawlActionName
        'catchimage', //抓取远程图片配置 catcherActionName
    ];
    //上传视频action
    let videoUploadActions = [
        'uploadvideo', //上传视频配置 videoActionName
        'uploadfile', //上传文件配置 fileActionName
    ];
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function (action) {
        if (imageUploadAction.indexOf(action) > -1) { //action在imageUploadAction中
            return "{:url('/index/upload/uEditorUpload?action=uploadimage')}"; //tp模板中使用url函数
        } else if (videoUploadActions.indexOf(action) > -1) { //视频上传
            return "{:url('/index/upload/uEditorUpload?action=uploadVideo')}"; //tp模板中使用url函数
        } else if (action == "config") {
            return this._bkGetActionUrl.call(this, action);
        } /*else {
            //其他情况按照默认的来,这里不做处理
        }*/

        // console.log(action);
    };
    var ue = UE.getEditor('uEditorID', {
        // initialFrameWidth : 800,
        initialFrameHeight: 700
    });
    // ue.getContent(); //获取内容
</script>
</html>

五、php上传代码,think5.1为例

  • control
    //控制器:上传文件统一入口 正常接收一个表单里的文件流
    public function uEditorUpload()
    {
        // ueditor1_4_3_3-utf8-php/uft8-php/php/config.json 中各种上传(上传图片、涂鸦图片上传、截图工具、上传视频、上传文件...)的路由名
        $actionName = isset($_REQUEST['action']) ? $_REQUEST['action'] : '';

        //获取文件表单名:***FieldName:除了涂鸦是source,其他的都是upfile
        $fieldName = ($actionName == 'catchimage') ? 'source' : 'upfile';

        $file = request()->file($fieldName); //根据表单名获取文件

        $uploadService = new UploadService();
        $result = $uploadService->uEditorUpload($file, $actionName);

        return json($result);
    }
  • service
    /**
     * 文件上传方法
     * @param $file
     * @param $actionName
     * actionName 区分上传的类型:对应 ueditor1_4_3_3-utf8-php/uft8-php/php/config.json 中配置项
     * @return array
     */
    public function uEditorUpload($file, $actionName)
    {
        if ($actionName == 'uploadimage') { //上传图片
            $suffixCheck = ['ext' => 'jpg,png,gif,jpeg,bmp']; //文件后缀校验
        } else { //上传视频,文件
            $suffixCheck = ['ext' => 'jpg,png,gif,jpeg,bmp,avi,dat,mkv,flv,vob,wmv,asf,asx,mpe,mpg,mpeg,3gp,mov,mp4,zip,rar,pdf,swf,ppt,psd,ttf,txt,xls,doc,docx'];
        }

        $info = $file->validate($suffixCheck)->move('uploads');
        if ($info) {
            $saveName = $info->getSaveName();
            $fileName = str_replace('\\', '/', $saveName); //文件名
            $completePath = Env::get('root_path') . 'public/uploads/' . $fileName; //文件完整路径

            $fileType = $info->getExtension(); //文件类型
            $fileSize = byte_format($info->getSize(), 2); //文件大小

            /*
            ALYOss::upload($fileName, $completePath); //调用自己再次封装阿里云oss上传的方法,文件上传到阿里云oss
            $alyOssUrl = 'https://resource/...../com/'; //阿里云设置的图片存储地址
            $url = $alyOssUrl . $fileName;
            unlink(str_replace('\\','/', $completePath)); //删除上传到了项目中的图片(文件)
            */

            //成功返回格式
            return [
                "state" => 'SUCCESS',
                "url" => $completePath,
                "title" => $fileName,
                "original" => $saveName,
                "type" => $fileType,
                "size" => $fileSize
            ];
        } else {
            //失败返回格式
            return [
                "state" => 'ERROR',
                "url" => '',
                "title" => '',
                "original" => '',
                "type" => '',
                "size" => 0
            ];
        }
    }

六、他山之石

  • thinkphp5.1对接ueditor(自定义上传接口)

相关文章:

  • “双非”渣本投岗爱奇艺(Java),三轮技术面等消息,侥幸通过!
  • FlinkSQL系列04-CDC连接器
  • 包-node.js中的第三方模块
  • vscode 个人实用插件(资源集合)
  • GTOT-Toolkit模板参考
  • [贪心]Min-Max Array Transformation Codeforces1721C
  • 猿创征文|【算法入门必刷】数据结构-栈(二)
  • 数据结构-压缩软件核心(利用哈夫曼树进行编码,对文件进行压缩与解压缩)
  • 月薪12.8K,零基础转行软件测试5月斩获3份过万offer,分享一些我的秘招~
  • 推荐一款新式开源的反向代理工具(FRP)
  • 复习一:基本概念和术语
  • Vue基础自学系列 | webpack中的插件
  • 稻盛和夫:让年轻人脱胎换骨的6条自我提升原则
  • HTML5新特性 day_02(8.8)
  • springboot2.0 配置ssl证书详解
  • 【Leetcode】101. 对称二叉树
  • [数据结构]链表的实现在PHP中
  • Android Volley源码解析
  • HTTP中的ETag在移动客户端的应用
  • JAVA并发编程--1.基础概念
  • Mocha测试初探
  • MySQL用户中的%到底包不包括localhost?
  • Protobuf3语言指南
  • python 装饰器(一)
  • Python学习笔记 字符串拼接
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • Transformer-XL: Unleashing the Potential of Attention Models
  • 不上全站https的网站你们就等着被恶心死吧
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 关于Java中分层中遇到的一些问题
  • 将回调地狱按在地上摩擦的Promise
  • 实战:基于Spring Boot快速开发RESTful风格API接口
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • 我建了一个叫Hello World的项目
  • 你学不懂C语言,是因为不懂编写C程序的7个步骤 ...
  • 专访Pony.ai 楼天城:自动驾驶已经走过了“从0到1”,“规模”是行业的分水岭| 自动驾驶这十年 ...
  • ​决定德拉瓦州地区版图的关键历史事件
  • ​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​
  • # MySQL server 层和存储引擎层是怎么交互数据的?
  • #android不同版本废弃api,新api。
  • $.proxy和$.extend
  • $HTTP_POST_VARS['']和$_POST['']的区别
  • (AtCoder Beginner Contest 340) -- F - S = 1 -- 题解
  • (PHP)设置修改 Apache 文件根目录 (Document Root)(转帖)
  • (TOJ2804)Even? Odd?
  • (转)AS3正则:元子符,元序列,标志,数量表达符
  • (转)IIS6 ASP 0251超过响应缓冲区限制错误的解决方法
  • (转载)VS2010/MFC编程入门之三十四(菜单:VS2010菜单资源详解)
  • (最完美)小米手机6X的Usb调试模式在哪里打开的流程
  • ***监测系统的构建(chkrootkit )
  • .Net Core webapi RestFul 统一接口数据返回格式
  • .NET MVC 验证码
  • .NET 常见的偏门问题
  • .NET/C# 使用 #if 和 Conditional 特性来按条件编译代码的不同原理和适用场景
  • .netcore 如何获取系统中所有session_ASP.NET Core如何解决分布式Session一致性问题