图文混排及图片上传

1. 引入js

注意:
一定按照先引入,再安装的顺序写下面的

此tinymce只能用/jquery-1.12.4版本 ,高版本不兼容

<script src="/static/sadmin/js/jquery.form.min.js"></script>
引入
<script src="/static/sadmin/tinymce/js/tinymce/tinymce.min.js"></script>    
安装
<script src="/static/sadmin/js/tinymce_setup.js"></script>

2.修改 tinymce_setup.js

imageupload_url:  " /submit_image/"

tinymce.init({
    //选择content的class标签作为编辑器 详情的div的id= rich_content
    selector: '#rich_content',
    //图文混排的def的接口 
    imageupload_url: "/sadmin/submit_image/"
});

3. 配制上传目录

在分文件夹下创建 upload文件夹
Setting.py 中定义上传文件夹的路径

UPLOAD_ROOT = os.path.join(BASE_DIR,'upload')

4.在项目url.py中配制

from mysite.settings import UPLOAD_ROOT
#导入文件路由库
from django.views.static import serve

正则路由re_path

from django .urls import path, re_path

upload上传目录 (?P .*)参数 path是实参

re_path('^upload/(?P<path>.*)$',serve,{'document_root':UPLOAD_ROOT}),

5.代码

只有图文混排

img = request.FILES.get('file')
        def uploadfil(img):
f = open(os.path.join(settings.UPLOAD_ROOT,'',img.name),'wb')
        #写文件 遍历图片文件流
        for chunk in img.chunks():
            f.write(chunk)
        #关闭文件流
        f.close()
        mes={}
        mes['path'] = "/upload/"+img.name
mes['error'] = False
        return HttpResponse(json.dumps(mes,ensure_ascii=False))  

一个def函数,先写入文件,再给接口传送图片名

def submit_image(request):
    img = request.FILES.get('file')
    f = open(os.path.join(settings.UPLOAD_ROOT, '', img.name), 'wb')
    # 写文件 遍历图片文件流
    for chunk in img.chunks():
        f.write(chunk)
    # 关闭文件流
    f.close()
    mes = {}
    mes['path'] = "/upload/" + img.name
    mes['error'] = False
    return HttpResponse(json.dumps(mes, ensure_ascii=False))

HTML中添加的代码

<form action="" method="post" enctype="multipart/form-data">

div标签里不能写name
详细信息:

<div >
    <input name='count' id="rich_content">
</div>

图片上传和图文混排同时用时,可以把图片流写入def提取出来

图片上传

import os
from movie import settings
def upload_image(image):
    f = open(os.path.join(settings.UPLOAD_ROOT, '', image.name), 'wb')
    # 写文件 遍历图片文件流
    for chunk in image.chunks():
        f.write(chunk)
    # 关闭文件流
    f.close()

#图文混排
def submit_image(request):
    img = request.FILES.get('file')
    upload_image(img)
    mes = {}
	# path和error是不能变的 是给上传图片按钮内部分装Ajax的
    mes['path'] = "/upload/" + img.name
    mes['error'] = False   #上传成功
	# 图文混排js内部封装了用ajax方式传送数据,此处必须返回json
    return HttpResponse(json.dumps(mes, ensure_ascii=False))   #ensure_ascii=False防乱码

PY def add()函数中
1.图片需要先获取
image=request.FILES.get(‘image’)
2.然后通过函数保存到upload文件夹中
upload_image(image)
3. 保存到数据库
ad=Movie(name=name,image=’/upload/’+image.name, image_url=count)
ad.save()
4. 图文混排是通过def submit_image()函数进行上传的,此处保存的时候就只需要正常保存变量就行.

展示内容的时候加上
{{count | safe}}