您现在的位置是:首页 > 点滴分享 > 经验 网站首页点滴分享

wangEditor配置上传至七牛云

最近一个项目要求使用富文本编辑器,经过选择之后确定使用wangEditor,但是在上传图片到七牛云的时候出现了问题,例如上传失败,提示信息显示"key 和 scope不一致", 同时也出现了每次只能上传一张图片的问题,经过查看和研究七牛云官方文档之后最终找出解决办法。


 

 

 // 创建上传对象
    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: btnId,       //上传选择的点选按钮,**必需**
        uptoken_url: '/uptoken',

 


  • 二 :  后台返回uptoken函数,忽略前端图片上传的文件名,后台自动随机生成一个文件名,作为save_key

class TokenReturnView(APIView):
    """
        其他代码
    """

    def get(self, request):
        # 随机生成一个文件名
        table = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM" 
        pkey = "Posts/" + "".join(random.sample(table, 16)) + ".jpg"

        # 七牛云认证
        q = Auth(APP_ID, APP_KEY)
        bucket_name = 'android'
        # key 使用默认的None
        key = None
        # 上传策略
        policy = {
            "scope": "android",  # 由于不清楚前端上传的图片名,因此此处只写bucket_name
            "saveKey": pkey,  # 使用随机生成的文件名作为资源的保存名,这样就不会出现”key和scope“不一致的错误了
        }
        # 使用七牛云上传凭证生成的python SDK, 生成uptoken.
        token = q.upload_token(bucket_name, key, 3600, policy)

        return Response({
            'uptoken': token
        }, HTTP_200_OK)

 


  • 三:   根据wangEditor配置七牛云说明文档 所写, 获取demo里的qiniu.js,将其添加到项目之中(与qiniu.js相关的js文件也需要一并添加)。编辑qiniu.js

即添加一个js触发条件,每当点击上传图片按钮时就重新获取一个uptoken,避免由于uptoken没有刷新而导致只能上传一张图片的问题。

        var getUpToken = function() {
            $(".w-e-icon-image").click(function(){
                var ajax = that.createAjax();
                ajax.open('GET', that.uptoken_url, true);
                ajax.setRequestHeader("If-Modified-Since", "0");
                ajax.onreadystatechange = function() {
                    if (ajax.readyState === 4 && ajax.status === 200) {
                        var res = that.parseJSON(ajax.responseText);
                        that.token = res.uptoken;
                    }
                };
                ajax.send();
            });
        };


  • 四     至此,问题解决

 


版权声明:本文为博主原创文章,转载时请注明来源。https://blog.thinker.ink/passage/2/

 

文章评论

Top