django使用ueditor服务器端配置
之前我们说到了vue
中使用editor
,可以使用vue-ueditor-wrap
,其实python
中也有人帮我们集成了ueditor
,今天我们不打算从零写ueditor
服务端接口,参考**DjangoUeditor3
**定制属于我们自己的ueditor
服务端接口
我们来打开DjangoUeditor3
的仓库https://github.com/twz915/DjangoUeditor3,
拷贝项目源码
新建视图
新建我们的ueditor
视图接口ueditor_view.py
拷贝仓库中的DjangoUeditor3/DjangoUeditor/views.py
文件内容到ueditor_view.py
新建配置文件
视图中引用了自己的一个setting
,包含自己ueditor
上传的一些设置,我们也一起拿过来
在我们当前应用中创建settings.py
DjangoUeditor3/DjangoUeditor/settings.py
复制到其中
创建接口url
1 | from app.ueditorviews import get_ueditor_controller |
get_ueditor_controller
就是我们的入口
连接前端vue
将vue
使用ueditor
前端配置中的serverUrl
配置为我们刚才的接口地址,我这里都在本地测试,端口不同
1 | serverUrl: 'http://localhost:8000/controller', |
初试接口
点击上传图片无反应
默认请求接口带了一个action
和callback
的参数,200接口访问成功,但是却没有取回任何数据,观察下之前我们用到的测试服务接口,是有返回数据的,对方是用的php
,我们来看下ueditor_view.py
源码
控制台也打印了如下:
1 | Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:8000/controller?action=config&callback=bd__editor__ve7qge with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details. |
1 |
|
可以看出来做了一个类似反射的东西,初始连接带了action
参数为config
,所以对应的把我们给踢到get_ueditor_settings
方法中了,继续跟进到这个方法
1 |
|
我们来打印下json_data
1 | {"imageActionName": "uploadimage", "imageMaxSize": 10485760, "imageFieldName": "upfile", "imageUrlPrefix": "http://localhost:8000", "imagePathFormat": "", "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "scrawlActionName": "uploadscrawl", "scrawlFieldName": "upfile", "scrawlMaxSize": 10485760, "scrawlUrlPrefix": "", "scrawlPathFormat": "", "snapscreenActionName": "uploadimage", "snapscreenPathFormat": "", "snapscreenUrlPrefix": "", "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherPathFormat": "", "catcherActionName": "catchimage", "catcherFieldName": "source", "catcherMaxSize": 10485760, "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "catcherUrlPrefix": "", "videoActionName": "uploadvideo", "videoPathFormat": "", "videoFieldName": "upfile", "videoMaxSize": 102400000, "videoUrlPrefix": "", "videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], "fileActionName": "uploadfile", "filePathFormat": "", "fileFieldName": "upfile", "fileMaxSize": 204800000, "fileUrlPrefix": "", "fileAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"], "imageManagerActionName": "listimage", "imageManagerListPath": "", "imageManagerListSize": 30, "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "imageManagerUrlPrefix": "", "fileManagerActionName": "listfile", "fileManagerListPath": "", "fileManagerUrlPrefix": "", "fileManagerListSize": 30, "fileManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".tif", ".psd.flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml", ".exe", ".com", ".dll", ".msi"]} |
有返回数据,可以前台没有响应,再仔细观察下除了action
还带了一个callback
参数,我们还没用到,刷新发下,这个callback
的值每次还随机变动,跟原示例返回值比较下,外层少了一个callback()
,我们简单来组装下这个参数。
1 | callback = request.GET.get('callback') |
再次测试,控制台没有警告了,且我们也取到返回值了
1 | bd__editor__dzdteh({"imageActionName": "uploadimage", "imageMaxSize": 10485760, "imageFieldName": "upfile", "imageUrlPrefix": "http://localhost:8000", "imagePathFormat": "", "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "scrawlActionName": "uploadscrawl", "scrawlFieldName": "upfile", "scrawlMaxSize": 10485760, "scrawlUrlPrefix": "", "scrawlPathFormat": "", "snapscreenActionName": "uploadimage", "snapscreenPathFormat": "", "snapscreenUrlPrefix": "", "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherPathFormat": "", "catcherActionName": "catchimage", "catcherFieldName": "source", "catcherMaxSize": 10485760, "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "catcherUrlPrefix": "", "videoActionName": "uploadvideo", "videoPathFormat": "", "videoFieldName": "upfile", "videoMaxSize": 102400000, "videoUrlPrefix": "", "videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], "fileActionName": "uploadfile", "filePathFormat": "", "fileFieldName": "upfile", "fileMaxSize": 204800000, "fileUrlPrefix": "", "fileAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"], "imageManagerActionName": "listimage", "imageManagerListPath": "", "imageManagerListSize": 30, "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "imageManagerUrlPrefix": "", "fileManagerActionName": "listfile", "fileManagerListPath": "", "fileManagerUrlPrefix": "", "fileManagerListSize": 30, "fileManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".tif", ".psd.flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml", ".exe", ".com", ".dll", ".msi"]}) |
测试单图片上传,应该大多数人已经可以成功上传了。
图片上传成功,却提示上传错误,不显示图片
这部分都是跨域问题,解决办法如下:UploadFile
函数返回值做修改,添加一个header
即可。
1 | response = HttpResponse(json.dumps(return_info, ensure_ascii=False)) |
测试多图片
点击上传多张图片按钮会出现以下提示:
控制台:
1 | Access to XMLHttpRequest at 'http://localhost:8000/controller?action=uploadimage&encode=utf-8' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field x_requested_with is not allowed by Access-Control-Allow-Headers in preflight response. |
图片上传失败;跨域问题;而且访问接口请求成功200,请求方法却是options
以前没有用到过该方法,百度查了下,大概意思是说这个浏览器自己发的,先试探下服务器允不允许。我在ueditor_view
入口函数包括上传函数中都打印请求,很显然什么也没打印出来,真是不知道这个options
方法会走到程序的哪里,甚至打算将这个视图写成cbv
,走走options
函数试试。
后来想到初始使用vue
连django
时也出现了该提示,详见:Access-Control-Allow-Origin跨域问题,当时用的是
django-cors-headers
,按照文中内容配置好
主要配置:
1 | CORS_ALLOW_HEADERS = [ |
测试多图片上传,完美