python+ueditor+七牛云存储整合

简介:

开发环境:python pyramid。

参考网址:http://developer.qiniu.com/docs/v6/sdk/python-sdk.html,http://my.oschina.net/duoduo3369/blog/174655


项目中要将ueditor集成到网站,但是图片上传有问题。于是采取客户端(终端用户) => 七牛 => 业务服务器的方式来处理图片。详细的流程这篇文章写的很清楚:http://my.oschina.net/duoduo3369/blog/174655,不过是java的,而且也没做图片显示的处理。整个流程如下:

在此输入图片描述

以下是几个关键步骤:

签名生成token

配置项目服务端请求路径:/ueditor/uptoken用来生成uptoken。
@view_defaults(route_name='ueditor')
class UeditorView(object):
    
    def __init__(self, request):
        self.request = request
        self.db = request.db
        qiniu.conf.ACCESS_KEY = "your access_key"
        qiniu.conf.SECRET_KEY = "your secret_key"
        self.bucket_name="你的七牛空间名"

    @view_config(renderer='jsonp', match_param=('action=uptoken'))
    def uptoken(self):
        policy = qiniu.rs.PutPolicy(self.bucket_name)
        token= policy.token()
        return dict(token=token)

    @view_config(renderer='jsonp', match_param=('action=imgmanage'))
    def imgmanage(self):
        pass
还有一个/ueditor/imgmanage用来图片管理的,这个暂时没做。使用前先用easy_install安装qiniu的包并import一下。

配置ueditor上传请求

我用的版本是ueditor1_2_6_1-jsp-utf8版本。要改动的是dialogs/image/image.html文件:
在body里面添加一个表单,用来向七牛服务器上传token:
<input id="qiniu_token" type="hidden" name="token" />

在javascript标签中加入以下代码用来向项目服务器获取uptoken:
        $(function(){
            $.get("/ueditor/uptoken", function(data) {
                $("#qiniu_token").val(data["token"]);
            });
        });
然后在上传按钮点击事件 $G("upload").onclick中添加token参数:
var postParams = {
                    "dir":baidu.g("savePath").value,
                    "token":$("#qiniu_token").val()//for qiniu yun token
                };

还需要改ueditor下的ueditor.config.js文件,在window.UEDITOR_CONFIG配置中修改图片上传配置:
window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径,这个不能被注释
        UEDITOR_HOME_URL : URL

        //图片上传配置区
        ,imageUrl:"http://up.qiniu.com/"            //图片上传提交地址
        ,imagePath:"http://shikeim.qiniudn.com/"   //图片修正地址,这是七牛云应用空间的地址
        ,imageFieldName:"file"//七牛结合需要改成file
这样图片就可以正常上传到七牛云服务器了。

在ueditor中显示图片

调试了好久,发现image.html下面有个回调函数对象callbacks。这是上传成功的回调函数:
// 单个文件上传完成的回调
                uploadCompleteCallback: function(data){
                    try{
                        var info = eval("(" + data.hash + ")");
                        info && imageUrls.push(info);
                        selectedImageCount--;
                    }catch(e){
                    	console.log("excetion!up load failed...");
                    }

                },

但事实上七牛云图片上传成功了,响应的却是uploadErrorCallback上传失败回调函数,于是将原来的uploadErrorCallback注释掉,自己重新写了个:
//qiniu yun 上传...
                uploadErrorCallback: function(data){
                    try{
                        var info = eval("(" + data.info + ")");
                        imgurl={normal:info['hash'],small:info['hash']+'-small'};
                        imageUrls.push(imgurl);
                        // console.log(imageUrls);
                        selectedImageCount--;
                    }catch(e){
                        console.log("excetion!up load failed...");
                    }

                },
imgurl就是七牛云返回的服务器端图片文件名,我在七牛云上做了配置上传的图片有原版normal,还有缩略图版small,这两个都返回了,便于编辑器处理。
改完之后发现图片能插入了,但是无法正确显示,审查元素发现是图片名undefined,于是又看image.js的源码,发现插入图片的是insertBatch函数,于是就该了下:
/**
     * 插入多张图片
     */
    function insertBatch() {
        if (imageUrls.length < 1) return;
        var imgObjs = [],
            align = findFocus("localFloat", "name");

        for (var i = 0, ci; ci = imageUrls[i++];) {
            var tmpObj = {};
            console.log(ci);
            tmpObj.title = ci.title;
            tmpObj.floatStyle = align;
            //修正显示时候的地址数据,如果后台返回的是图片的绝对地址,那么此处无需修正
            tmpObj._src = tmpObj.src = editor.options.imagePath + ci.small;//这里使用缩略图
            imgObjs.push(tmpObj);
        }
        insertImage(imgObjs);
        hideFlash();
    }
至此图片上传成功集成。不过还有一些小细节需要完善。

总结

有问题先网上查,查的目的不是找答案,而是找思路。明白思路后看文档,答案都在源码中。






相关文章
|
网络协议
nmtui命令详解
【4月更文挑战第9天】`nmtui`是NetworkManager的文本用户界面工具,用于终端中的网络配置和管理。用户可通过它查看网络设置、配置接口、修改设置、添加/删除连接及调整连接优先级。操作步骤包括启动nmtui,选择编辑连接,修改网卡设置,保存并退出。此工具包含在NetworkManager-tui子软件包中,配置更改会持久生效。了解更多详情可参考相关文档。
1181 1
|
SQL XML 存储
【MyBatis-Plus】MyBatis-Plus基本操作快速入门(二)
【MyBatis-Plus】MyBatis-Plus基本操作快速入门(二)
534 0
【MyBatis-Plus】MyBatis-Plus基本操作快速入门(二)
|
运维 DataWorks 监控
DataWorks产品使用合集之在 DataWorks 中,配置并管理实时同步任务的步骤如何解决
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
173 0
|
机器学习/深度学习 人工智能 自然语言处理
【人工智能】第五部分:ChatGPT的实际应用案例和未来发展方向
【人工智能】第五部分:ChatGPT的实际应用案例和未来发展方向
575 3
|
机器学习/深度学习 算法 Python
OpenAI Gym 中级教程----深入解析 Gym 代码和结构
OpenAI Gym 中级教程----深入解析 Gym 代码和结构
1031 1
|
NoSQL 安全 容灾
1分钟实现Redis数据迁移任务
NineData 基于全量复制、增量日志复制技术,提供了高效、安全可靠的 Redis 不停机迁移方案。当然,除了 Redis,NineData 已经支持数十种常见数据库的迁移复制,实现数据库迁移、数据容灾、数据双活、数据仓库实时集成等业务场景。同时,除了 SAAS 模式外,还提供了企业专属集群模式,满足企业最高的数据安全合规要求。
412 0
|
机器学习/深度学习 人工智能 编解码
两句话,让AI生成VR场景!还是3D、HDR全景图的那种
两句话,让AI生成VR场景!还是3D、HDR全景图的那种
742 0
两句话,让AI生成VR场景!还是3D、HDR全景图的那种
|
存储 缓存 监控
电商 SaaS 全渠道实时数据中台最佳实践
聚水潭数据专家张成玉,聚水潭高级数据工程师应圣楚,在 FFA 2022 行业案例专场的分享。
电商 SaaS 全渠道实时数据中台最佳实践
|
测试技术
效率度量与运营
价值度量与运营 无论是保障质量还是提升交付效率,都是在“如何正确地进行产品交付”这个维度上,那么如何确保产品本身是正确的呢?即,产品本身传递了正确的价值,这就需要对价值进行度量
491 0
|
安全 Linux 网络安全
SIP不能注册或呼叫到服务器端怎样处理
SIP不能注册或呼叫到服务器端怎样处理