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

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

• 一 :   根据wangEditor配置七牛云说明文档 所写，设置uptoken_url

 // 创建上传对象
    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/