kindeditor 加入七牛云上传的实例讲解


Posted in PHP onNovember 12, 2017

七牛云上传主要有两种:

服务端上传

前端上传,前端又分两种返回方式:

1).重定向返回,可以解决ajax跨域的问题

2).回调返回,七牛云先向服务端要返回数据,再由七牛云返回前端,解决不支持重定向的请求方式,比如小程序上传

本次使用的是 七牛云 php sdk;

composer require qiniu/php-sdk

在Kindeditor/php 下添加 config.php 主要是配置参数

<?php
error_reporting(0);
 
defined('ROOT_PATH') || define('ROOT_PATH', dirname(__DIR__).'/');
defined('QINIU_ACCESS_KEY') || define('QINIU_ACCESS_KEY', '');
defined('QINIU_SECRET_KEY') || define('QINIU_SECRET_KEY', '');
defined('QINIU_TEST_BUCKET') || define('QINIU_TEST_BUCKET', '七牛云空间名');
defined('QINIU_BUCKET_DOMAIN') || define('QINIU_BUCKET_DOMAIN', '七牛云空间网址');
 
defined('CALLBACK_URL') || define('CALLBACK_URL', '域名/kindeditor/php/callBack.php');
defined('RETURN_URL') || define('RETURN_URL', '域名/kindeditor/php/returnBack.php');
 
require_once ROOT_PATH."vendor/autoload.php";

在Kindeditor/php 下添加 qiniu_token.php 主要是生成上传用的 token

<?php
use Qiniu\Auth;
 
require_once __DIR__."/config.php";
 
// 构建鉴权对象
$auth = new Auth(QINIU_ACCESS_KEY, QINIU_SECRET_KEY);
 
$data = [
  'returnUrl' => RETURN_URL,
];
if (isset($_REQUEST['is_call'])) {
  $data = [
   'callbackUrl' => CALLBACK_URL,
   'callbackBody' => 'key=$(key)&hash=$(etag)&w=$(imageInfo.width)&h=$(imageInfo.height)'
  ];
}
// 生成上传 Token
$token = $auth->uploadToken(QINIU_TEST_BUCKET, null, 3600, $data);
 
echo json_encode([
  'error' => 0,
  'token' => $token
]);

在Kindeditor/php 下添加 callBack.php 主要是回调用

<?php
use Qiniu\Auth;
 
require_once __DIR__."/config.php";
$_body = file_get_contents('php://input');
$auth = new Auth(QINIU_ACCESS_KEY, QINIU_SECRET_KEY);
//回调的contentType
$contentType = 'application/x-www-form-urlencoded';
//回调的签名信息,可以验证该回调是否来自七牛
$authorization = $_SERVER['HTTP_AUTHORIZATION'];
$isQiniuCallback = $auth->verifyCallback($contentType, $authorization, CALLBACK_URL, $_body);
if (!$isQiniuCallback) {
  echo json_encode([
    'error' => 2,
    'message' => '验证失败'
  ]);
  die();
}
 
$body = $_POST;
$qiniu_url = QINIU_BUCKET_DOMAIN;
if (!empty($body['key'])) {
  echo json_encode([
    'error' => 0,
    'url' => $qiniu_url.$body['key']
  ]);
  die();
}
echo json_encode([
  'error' => 1,
  'message' => '视频上传出错'
]);

在Kindeditor/php 下添加 returnBack.php 主要是重定向接收地址

<?php
use Qiniu\Auth;
 
require_once __DIR__."/config.php";
$upload_ret = base64_decode($_GET['upload_ret']);
$upload_ret = json_decode($upload_ret, true);
$qiniu_url = QINIU_BUCKET_DOMAIN;
if (!empty($upload_ret['key'])) {
  echo json_encode([
    'error' => 0,
    'url' => $qiniu_url.$upload_ret['key']
  ]);
  die();
}
echo json_encode([
  'error' => 1,
  'message' => '视频上传出错'
]);

接下来是前端更改,我改的时视频上传

Kindeditor/plugins/media/media.js

KindEditor.plugin('media', function(K) {
  var self = this, name = 'media', lang = self.lang(name + '.'),
    allowMediaUpload = K.undef(self.allowMediaUpload, true),
    allowFileManager = K.undef(self.allowFileManager, false),
    formatUploadUrl = K.undef(self.formatUploadUrl, true),
    extraParams = K.undef(self.extraFileUploadParams, {
      'token': ''//添加token
    }),
    filePostName = K.undef(self.filePostName, 'file'), //更改文件上传名
    uploadJson = K.undef(self.uploadJson, 'https://up.qbox.me'); //更改上传地址,我用的时华东区的空间使用https
 
     
    ....
 
      function getQToken() {
        $.getJSON('/includes/kindeditor/php/qiniu_token.php', function (data) {
          K('[name="token"]', div).val(data.token);
        });
      }
            // 获取设置上传token
      getQToken();
 
      if (allowMediaUpload) {
        var uploadbutton = K.uploadbutton({
          button : K('.ke-upload-button', div)[0],
          fieldName : filePostName,
          extraParams : extraParams,
          url : uploadJson,//去除添加参数
          afterUpload : function(data) {
      ...
});

这要就可以上传视频到七牛云了。

以上这篇kindeditor 加入七牛云上传的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
利用PHP创建动态图像
Oct 09 PHP
php中用foreach来操作数组的代码
Jul 17 PHP
PHP高级对象构建 多个构造函数的使用
Feb 05 PHP
PHP代码审核的详细介绍
Jun 13 PHP
浅析php header 跳转
Jun 17 PHP
laravel 4安装及入门图文教程
Oct 29 PHP
CI框架简单邮件发送类实例
May 18 PHP
Yii2使用自带的UploadedFile实现的文件上传
Jun 20 PHP
php die()与exit()的区别实例详解
Dec 03 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
Dec 07 PHP
php从数据库中获取数据用ajax传送到前台的方法
Aug 20 PHP
PHP开发api接口安全验证操作实例详解
Mar 26 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
Nov 12 #PHP
PHP 断点续传实例详解
Nov 11 #PHP
PHP+AJAX 投票器功能
Nov 11 #PHP
PHP实现双链表删除与插入节点的方法示例
Nov 11 #PHP
PHP实现基于栈的后缀表达式求值功能
Nov 10 #PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
Nov 10 #PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
Nov 10 #PHP
You might like
一个php导出oracle库的php代码
2009/04/20 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
JavaScript实现筛选数组
2021/03/02 Javascript
Python发送Email方法实例
2014/08/21 Python
python之pandas用法大全
2018/03/13 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
美国钻石商店:Zales
2016/11/20 全球购物
行政文员岗位职责
2013/11/08 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
三方股份合作协议书
2014/10/13 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
python+opencv实现目标跟踪过程
2022/06/21 Python