ジャンゴ使用KindEditorアップロード写真

1、settings.pyにapp01、内部およびセットを作成

図2は、Get要求インターフェースディスプレイKindEditorに応答して、ビューapp01 /ビュー/テストを作成します

django.shortcuts インポートのHttpResponse、レンダリング
 から django.http 輸入  JsonResponseの
 輸入  OS
 から kindeditor_pro インポート  設定

＃ここにあなたの意見を作成します。

デフテスト（要求）：
     もし request.method == " POST " ：
        コンテンツ = request.POST.get（" コンテンツ" ）
         の戻りレンダリング（リクエスト、" test2.html " 、地元の人々 （））
     のリターン（要求、レンダリング" test.htmlというの"）

対応するルーティングの設定

urlpatterns = [
    URL（' 管理者/ ' 、admin.site.urls）、
    URL（' テスト/ ' 、views.test）、

    
]

アクセスhttp://127.0.0.1:8080/test/次のような効果があります

図3に示すように、バックエンド・コードへのメディアアクセスのためのパスを設定するために、まず、メディアのメディアパスを設定するメディアフォルダを作成するプロジェクト

settings.py内部での行を追加します。

MEDIA_ROOT = " メディア"

次に、ブラウザのフロントエンド内のメディアにアクセスするためのURLを開くには、次のルーティングurls.pyを設定する必要があります。

django.conf.urls インポートURLを
 から django.contribの輸入管理者
 から app01 インポートビュー
 から django.views.static 輸入  サーブ
 から kindeditor_pro インポート  設定
 のインポートOS

urlpatterns = [
    URL（' 管理者/ ' 、admin.site.urls）、
    URL（' テスト/ ' 、views.test）、
    URL（' アップロード/ ' 、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") }),
]

上传图片后，效果如下：

上传错误，效果如下：

ジャンゴ使用KindEditorアップロード写真

おすすめ