在之前的一篇文章中介绍了如何将富文本kindeditor结合到django中：Django2.0.4 结合 KindEditor 4.1.11 富文本编辑器
在同域环境中是没有问题的，换句话说，也就是上传接口如果部署在前端页面同一个域名下是没有问题的，然而美多商城的系统架构是前后端分离，前端页面是vue.js服务，后端接口是django服务，分别部署在不同的服务器上，如果在vue.sj页面中想要使用kindeditor中的上传文件功能，跨域请求django的接口就会报错。
本文解决在跨域情况下使用kindeditor的上传文件功能，解决思路就是用重定向方法来伪造成同域环境
在前端项目中，建立一个redirect.html,用来伪造同域获取参数
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>跨域重定向</title>
<script type="text/javascript">
function getParameter(val) {
var uri = decodeURI(window.location.search);
var re = new RegExp("" + val + "=([^&?]*)", "ig");
return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
}
var upload_callback = function() {
var error = getParameter("error");
error = parseInt(error)
var dataObject;
if(error==0){
var url = getParameter("url");
dataObject = {"error": error, "url": url};
}else{
var message = getParameter("message");
dataObject = {"error": error, "message": message};
}
var data = JSON.stringify(dataObject)
document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data + '</pre>';
}
</script>
</head>
<body onload="upload_callback();">
</body>
</html>
富文本页面并不需要改变什么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./static/js/jquery-1.12.1.min.js"></script>
<script src='./static/js/kindeditor/kindeditor-all-min.js'></script>
<title>美多编辑器</title>
</head>
<body>
<textarea id='content'>富文本</textarea>
<button onclick="checkit()">查看</button>
<script>
initKindEditor();
function initKindEditor() {
var kind = KindEditor.create('#content', {
uploadJson: 'http://localhost:8000/md_admin/front_upload',
items : [ 'source', 'image'],
width: '100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度（数字）
minHeight: 400 // 最小高度（数字）
});
}
function checkit(){
var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()
alert(content);
}
</script>
</body>
</html>
重点是后台接口文件，不再需要返回json数据，而是直接重定向到之前伪造好的前端页面redirect.html
#跨域上传方法
def frontupload(request):
if request.method == 'POST':
item = {}
file = request.FILES.get('imgFile')
#定义跳转网址，就是前端伪造好的页面
callBackPath = 'http://localhost:8080/redirect.html'
f = open(os.path.join(UPLOAD_ROOT,'',file.name),'wb')
item['message'] = '上传成功'
item['url'] = 'http://localhost:8000/upload/'+ file.name
item['error'] = 0
#写文件 遍历图片文件流
for chunk in file.chunks():
f.write(chunk)
return HttpResponseRedirect(callBackPath + "?error=0&url="+item['url'])
到此，问题解决，无论富文本在前端调用还是后端，都可以完美上传文件