码迷,mamicode.com
首页 > Web开发 > 详细

django中使用KindEditor上传图片

时间:2019-11-19 01:09:09      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:ready   function   als   error   mit   har   import   错误   you   

1、创建app01, 并在settings.py里面设置

2、创建一个视图app01/views/test,用于响应KindEditor界面显示的Get请求

from django.shortcuts import render, HttpResponse
from django.http import  JsonResponse
import  os
from kindeditor_pro import  settings

# Create your views here.

def test(request):
    if request.method == "POST":
        content = request.POST.get("content")
        return render(request, "test2.html", locals())
    return render(request, "test.html")

配置对应的路由

urlpatterns = [
    url(admin/, admin.site.urls),
    url(test/, views.test),

    
]

访问http://127.0.0.1:8080/test/效果如下:

技术图片

 

 

 

3、项目中创建media文件夹,  设置media媒体路径,首先,要设置后端代码对media访问的路径

在settings.py里面添加一行:

MEDIA_ROOT = "media"

然后,要开放前端在浏览器里面中访问media的url, 需要在路由urls.py里面配置如下:

技术图片

 

 

 

from django.conf.urls import url
from django.contrib import admin
from app01 import views
from django.views.static import  serve
from kindeditor_pro import  settings
import os

urlpatterns = [
    url(admin/, admin.site.urls),
    url(test/, views.test),
    url(upload/, views.upload_img),

    #手动添加对外开放的后端服务器资源
    url(r"^media/(?P<path>.*)", serve, {"document_root": settings.MEDIA_ROOT}),
    url(r"^media/(?P<path>.*)", serve, {"document_root": os.path.join(settings.MEDIA_ROOT, "editor") }),
]

这里配置了两个路径,代码开放根路径 media , 并且开放media下面的editor文件夹, 如果不写editor路由,那只能访问media根目录下的文件,无权限访问media下的其他文件夹;

测试一下 media对前端访问的url权限是否开放,可以在media下放置一个test2.PNG文件,然后在浏览器里面访问:http://127.0.0.1:8080/media/test2.PNG/, 如下,访问到了代码权限开放成功;

技术图片

 

 然后测试下media/editor权限是否开放成功,在media/editor下放置一个文件test1.PNG, 在浏览器中输入:http://127.0.0.1:8080/media/editor/test1.PNG/ ,如下代表访问成功:

技术图片

 

 

4、编写templates.html中, KindEditor上传文件的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="POST">
    {%  csrf_token %}
    <textarea name="content" id="editor_id" ></textarea>
    <input type="submit" value="submit">
</form>
</body>

<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js" ></script>
<script>
    KindEditor.ready( function (k) {
        window.editor = k.create(
            "#editor_id",
            {  width: "60%",
               height:"650px",
               resizeType: 0,
               uploadJson : "/upload/",
                extraFileUploadParams :{
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                },
            },
        );
    } );

</script>





</html>

 

5、编写后端响应图片上传的视图

from django.shortcuts import render, HttpResponse
from django.http import  JsonResponse
import  os
from kindeditor_pro import  settings

# Create your views here.

def test(request):
    if request.method == "POST":
        content = request.POST.get("content")
        return render(request, "test2.html", locals())
    return render(request, "test.html")

def upload_img(request):
    response_dic = {}
    file_obj = request.FILES.get("imgFile")
    if file_obj:
        #把文件上传后,放在
        path = os.path.join( settings.BASE_DIR, "media", "editor" )
        if not os.path.exists( path):
            os.mkdir(path)
        file_path = os.path.join(path, file_obj.name )
        with open(file_path, "wb") as f:
            for line in file_obj:
                f.write( line )
        response_dic["error"] = 0
        response_dic["url"] = "/media/editor/%s" % file_obj.name
    return JsonResponse( response_dic )
    # return  HttpResponse("OOOOOk")

设置路由

from django.conf.urls import url
from django.contrib import admin
from app01 import views
from django.views.static import  serve
from kindeditor_pro import  settings
import os

urlpatterns = [
    url(admin/, admin.site.urls),
    url(test/, views.test),
    url(upload/, views.upload_img),

    #手动添加对外开放的后端服务器资源
    url(r"^media/(?P<path>.*)", serve, {"document_root": settings.MEDIA_ROOT}),
    url(r"^media/(?P<path>.*)", serve, {"document_root": os.path.join(settings.MEDIA_ROOT, "editor") }),
]

上传图片后,效果如下:

技术图片

 

 

上传错误,效果如下:

技术图片

 

 

 

 

 

 

django中使用KindEditor上传图片

标签:ready   function   als   error   mit   har   import   错误   you   

原文地址:https://www.cnblogs.com/harryTree/p/11886504.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!