您现在的位置是:首页 > 点滴分享 > 经验分享 网站首页点滴分享
wangEditor配置上传至七牛云
- 经验分享
- 2018年9月13日 15:12
- 2358已阅读
- 24
最近一个项目要求使用富文本编辑器,经过选择之后确定使用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/
上一篇:返回主页