KindEditor图片上传到七牛云

自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEditor的源码和七牛的SDK看得云里雾里的,网上搜索又没有类似的解决方法,只好继续看源码自己搞了,弄了整整一个晚上,基本实现了,下面说说我的做法:

版本说明:

KindEditor版本:4x

七牛SDK:7.x.x

后端脚本:PHP

先看一下七牛给出的表单模板,在这里file和token这两个表单项是必须的

1.修改KindEditor的plugins/image/image.js文件

在第20行这里把上传文件的name字段改成和七牛的一致,即name="file",注释的那行是原代码

第二处改动是本地图片上传部分,这里只做本地图片上传的修改,其他都是类似的,包括文件的上传

将action的地址改为七牛的上传入口:http://upload.qiniu.com/,原本的处理地址是/php/upload_json.php

添加一个隐藏的表单项:<input name="token" class="qiniu_token" value="" style="display:none;"/>

至于file项这里看不到是因为它是另外加载的,就是hiddenElements.join(‘‘);这个,前面已经把file的name改了就好了

到这里,我们已经把基本的表单项添加到KindEditor了,但是token现在并没有value,接下来是实现ajax向服务器获取token

我的做法是直接在image.js这个文件的末尾写了个获取的token的函数:

这里因为是异步的方式,我只好使用jQuery去更改上面token的value,当然,用原生js实现会更好,不用去加载jQuery,我自己用getElementById去直接设置value貌似不行,折腾了好久不知道什么原因,本来jQuery的用的是val()方法也不奏效,只好给成attr()

上面这个是上传之后的回调函数,返回的数据是json格式,两个参数,当然后面添加处理回调的程序,回调参数个数可以自行设置

上传成功:

{"error":0,"url":"https:\/\/dn-lanbaidiao.qbox.me\/FryyQrpKYDDZrkJGWchh9_9og6Du"}

上传失败:

{"error":1,"message":"xxx错误信息"}

ps,这个函数不需要做任何修改,视个人情况而定,这里只是做一下说明

到这里,KindEditor就修改完成了,接下来是修改七牛的php文件以及增加一个callBack.php和getToken.php

2.后端代码的修改

先下载七牛的SDK源码,我这里使用的是PHP的:七牛SDK(PHP版本)

目录结构是这样

主要修改src/Qiniu/Auth.php这个文件,并在相同目录下添加callBack.php和getToken.php,即

#1 Auth.php

主要是添加一个可以自己处理上传事件的回调文件,即callBack.php,这里要注意的是回调地址必须和网站地址同个域名下,不然js会报跨域错误,因为KindEditor使用的是frame来处理图片上传,这也是为什么我不直接用七牛的回调而是自己写一个,我在这里琢磨了好久才发现

要用自己的回调的前提是要让七牛的回调地址跳转到你的回调地址,并把回调参数传给你的回调程序,所以添加一个returnUrl

接下来先写getToken.php即生成你的七牛token,如果不知道七牛的使用原理,建议先去看一下官方文档:七牛文档

然后是callBack.php(代替了原来kindEditor的upload_json.php的作用),自己根据情况设置参数,但要和image.js保持一致性

最后再用kindEditor测试一下图片上传,地址已经变成了七牛云存储的地址了,大大减轻了自己服务器流量和存储空间的压力

时间: 2024-08-02 07:20:38

KindEditor图片上传到七牛云的相关文章

图片上传到七牛云

必须要传一个参数类型为 MultipartFile 的 第一步:引入相关配置文件和工具类并导入依赖: qiniu.properties: qiniu.accessKey=xxxxxxxxxxxxx #公钥 qiniu.secretKey=yyyyyyyyyyyyy #密钥 qiniu.bucket=saas #存储空间名称 qiniu.rtValue=xxxxxxx #域名 公钥密钥在这里找 域名这里找: import com.google.gson.Gson; import com.qiniu

.Net Core实现将文件上传到七牛云存储

功能:将图片上传到七牛云存储 准备工作 注册七牛账号,提交实名认证(基本上1天内内审核通过) 登录七牛后台->对象存储->新建空间 (基本概念:https://developer.qiniu.com/kodo/manual/3978/the-basic-concept) 新建空间后会有免费域名可以使用.但是:测试域名,限总流量,限单 IP 访问频率,限速,仅供测试使用,不能用于自定义域名的 CNAME.建议还是使用自己的已经ICP备案的域名 CDN加速域名(自己的ICP备案的域名)提交后有个处

vue使用富文本编辑器vue-quill-editor实现配合后台将图片上传至七牛

一.全局注册:main.js import Vue from 'vue' import VueQuillEditor, { Quill } from 'vue-quill-editor' import { ImageDrop } from 'quill-image-drop-module' import ImageResize from 'quill-image-resize-module' import 'quill/dist/quill.core.css' import 'quill/dis

kindeditor图片上传 struts2实现

一.kindeditor以及struts2部署搭建不再赘述,如需要请参考kindeditor使用方法 Struts2框架搭建 二.kindeditor图片上传所依赖jar包在kindeditor\jsp\lib下有 三.以下列出部分核心代码,如需要全部源码可点击下载(待上传) JSP <textarea id="editor_id" name="content" style="width:950px;height:300px;"> 这

Tp3如何实现本地视频文件上传到七牛云

对于七牛云的使用,估计有些刚接触开发的技术人员还不太清楚,那么更不要说如何实现本地视频上传到七牛云转储了,其实这个技术并没有想象中的那么困难,下面就来跟大家详细介绍一下流程: 1.首先我们要先去寻找七牛云的SDK网址,打开后直接下载就行了; 2.下载完成之后我们把它放在tp框架的./ThinkPHP/Extend/Vendor/目录下; 3.完成之后,前期的准备工作就完成了,接下来就是自己上手写代码了: 首先肯定是先在模板部分建立一个form表单: *视频上传: 我们就提交到News控制器里的d

文件流数组上传到七牛云

首先要注册七牛云,申请个空间,获得密钥.等东西,引入官方sdk包,然后再开发文档中找到代码copy进去就可以了. 因为非常简单,我就直接弄上代码了. 1 package com.qianmo.foru.bean.request; 2 3 import com.qianmo.core.common.CommonRequest; 4 import org.hibernate.validator.constraints.NotBlank; 5 import org.springframework.we

MVC 中使用kindEditor 图片上传在IE 上进行上传出现的问题

在IE 上使用KindEditor 进行单张图片上传的时候会出现一个下载安全警告,这样将会造成图片上传失败,出现的错误页面: 将会出现这样的一个警告信息. 解决方案,: 是将上传的UpdataloadDetailsImg 方法的返回值 修改为 void 错误代码: public ActionResult UpdateloadDetailsImg() { string imageRemotePath = this.UploadImg(); if (!string.IsNullOrWhiteSpac

vue+element ui +vue-quill-editor 富文本图片上传到骑牛云

vue-quill-editor上传图片会转换成base64格式,但是这不是我们想要的,之后翻了很多文章才找到想要的,下面直接上代码 <style lang="sass">.quill-editor min-height: 500px background:#fff .ql-container min-height: 500px .ql-snow .ql-editor img max-width: 480px .ql-editor .ql-video max-width:

Tp3.1 文件上传到七牛云

TP3.1 中不支持Composer 就无法用composer 安装 下载历史的SDK https://github.com/qiniu/php-sdk/releases/tag/v7.0.8 下载下来放到 Think 目录下的Vendor下 进入代码 HTML的代码 <form id="upload" method='post' action="file" enctype="multipart/form-data"> <inp