正文 

当前位置： 首页 > java > java教程

kindeditor加入七牛云上传

author author     2022-09-30     338

关键词：

七牛云上传主要有两种：

  1. 服务端上传

  2. 前端上传，前端又分两种返回方式：

    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 QiniuAuth;

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 QiniuAuth;

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 QiniuAuth;

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) {
            ...
});

　

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

?

 

node七牛云上传文件

七牛云储存nodejs qiniu模块测试的一个实例constqiniu=require(‘qiniu‘)//需要填写你的AccessKey和SecretKeyvaraccessKey=‘‘varsecretKey=‘‘varmac=newqiniu.auth.digest.Mac(accessKey,secretKey)//要上传的空间名buketvarbucket=‘image‘va 查看详情

golang七牛云上传示例(代码片段)

查看详情

七牛云文件上传助手(代码片段)

qiniuyun_upload_tools最近写博客发现经常要上传图片到七牛云上去，每次打开网页登录然后上传感觉很慢，windows也没有一个好的上传工具，于是写了这样的一个工具。效果使用方法下载程序包点击下载解压后直接在config.json文件里面... 查看详情

如何用建木ci往七牛云上传文件(代码片段)

#gitee仓库路径#七牛云空间管理中创建的空间名字#七牛云密钥管理中的AK#七牛云密钥管理中的SK#存储区域，不设置时，自动识别，华东：z0；华北：z1；华南：z2；北美：na0；东南亚：as0#上传后在七牛云生成的uri#要上传的文件目... 查看详情

springboot上传文件到七牛云

准备工作mavenpom.xml添加七牛云的sdk依赖<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.27</version></dependency>配置项七牛云上传 查看详情

javawebservletjsp使用七牛云api上传图片(代码片段)

文章目录JavaWebservletjsp使用七牛云API上传图片工具类七牛云工具类JDBC工具类servicePhotoServicePhotoServiceImplDaoPhotoDaoPhotoDaoImplvoMyPutRetPhotoResultwebappweb.xmldata.jspdetail.jspindex.jsplist.jsptransfer.jspservletJDBCs 查看详情

上传base64图片到七牛云前端遇到的坑

介意前端普通引入七牛云SDk上传图片到七牛云需要多个js，所以才有了base64的上传方式，简化操作，（懒。）七牛云官方文档如下https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code  我们前端理所当然就... 查看详情

前端上传图片头像到七牛云格式变成text

参考技术A流程：七牛云后台的对象存储功能，nodejs后台生成七牛云的token，前端利用elementUI/ice的upload组件，文件名和token作为参数请求到七牛云后台。配置已经完成，写接口用的是express，koa同理，主要做法是先接收前端的图片... 查看详情

七牛云实现js上传

七牛云的官方API写的一塌糊涂。最主要的，还是版本兼容的问题。 一、引入文件引入了两个文件：1.jquery-1.10.2.min.js2.plupload.full.min.js3.qiniu.js版本太重要了。我提供了下载地址。二.html代码<pclass="tip1">本demo实现的图片预览... 查看详情

java实现七牛云文件或图片上传下载(代码片段)

文章目录一、准备工作1.1.为什么选择七牛云?1.2.七牛云注册二、java操作七牛云对象存储下载2.1.pom.xml引入依赖2.2.上传下载具体代码三、具体业务例子(七牛云做图片服务器--SpringBoot)3.1.pom.xml(此处继承上面的依赖多引入一个)3.2.创... 查看详情

七牛云上传androidapk文件

参考技术A1.如何将androidapk文件上传到七牛云？1.1首先要设置mimeType文件格式。如图片的：\'image/png\',\'image/jpeg\',\'image/jpg\',\'image/webp\'。1.2androidapk文件的格式为：\'application/vnd.android.package-archive\'2.如何拼接返回的url？2.1"https://res1.... 查看详情

文件流数组上传到七牛云

首先要注册七牛云，申请个空间，获得密钥、等东西，引入官方sdk包，然后再开发文档中找到代码copy进去就可以了。因为非常简单，我就直接弄上代码了。1packagecom.qianmo.foru.bean.request;23importcom.qianmo.core.common.CommonRequest;4importorg.hi... 查看详情

jsp使用七牛云api和webuploader上传多组图片(代码片段)

文章目录jsp使用七牛云API和webuploader上传多组图片介绍目录树遇到的问题上传组件的选择问题进度条多线程前端界面数据库关键代码UserPhotoDaoImplUploadServletJDBCServletlist.jspadd.jsppom.xml参考jsp使用七牛云API和webuploader上传多组图片介绍... 查看详情

ueditor上传图片到七牛云存储（formapi,java）

转：http://my.oschina.net/duoduo3369/blog/174655ueditor上传图片到七牛云存储ueditor结合七牛传图片七牛的试炼开发前的准备与注意事项说明Let‘srock与ueditor结合前的准备工作首先从表单开始生成token建立图片空间生成token上传流程集成ueditor... 查看详情

java向七牛云上传图片的摆动程序(代码片段)

查看详情

微信小程序上传图片及上传到上传到七牛云(代码片段)

微信小程序图片上传功能包含：上传到七牛云、删除图片、查看图片   1.创建子组件tpupload//wxml文件<viewstyle="padding:10px;"><!--图片上传--><viewclass="weui-uploader"><viewclass="img-vweui-uploader__bd">< 查看详情

初试“七牛云”--零基础运用七牛云配合ueditor实现图片的上传和浏览（.net篇）

...个新问题，第一步当然是先百度一下。。。看了N个关于七牛云的使用的帖子，表示还是蒙圈的，看懂了一部分，但是不系统，理解的不连贯，作为一个凡是要弄个特别明白的死脑筋，于是开始从头看是研究文档。。。。（以下... 查看详情

vue3+typescript上传文件到七牛云

...久了，但是一直没有完成上传文件的功能，之前看了几次七牛云的文档，折腾了几次，没有成功，今天下了决心必须解决这个问题就又开始了各种找资料，看文档，看示例，终于搞定了。项目中使用的是vite.js构建的，而且用的... 查看详情