问题描述:

在写bbs项目的时候,老师用的是Django1.X结合富文本编辑器kindeditor,实现了图片上传,但是我在用Django3.X的时候,代码和老师一模一样,上传图片的时候一直转圈圈???但是文件夹article_img已经创建,并且图片已经成功上传到服务端。

如下图:

各部分代码截图如下

add_article.html

{% extends 'backend/backend_base.html' %}

{% block article %}
<h3>添加文章</h3>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>标题</p>
<div>
<input type="text" name="title" class="form-control">
</div>
<p>内容</p>
<div>
<textarea name="content" id="id_content" cols="60" rows="10"></textarea>
</div>
<p>分类</p>
<div>
{% for category in category_list %}
<input type="radio" value="{{ category.pk }}" name="category">{{ category.name }}
{% endfor %}
</div> <p>标签</p>
<div>
{% for tag in tag_list %}
<input type="checkbox" value="{{ tag.pk }}" name="tag">{{ tag.name }}
{% endfor %} </div>
<input type="submit" class="btn btn-danger">
</form>
{% endblock %} {% block js %}
{% load static %}
<script charset="utf-8" src="{% static 'kindeditor/kindeditor-all-min.js' %}"></script>
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#id_content', {
width : '100%',
height:'700px',
resizeType:1,
uploadJson : '/upload_image/',
extraFileUploadParams : {
'csrfmiddlewaretoken':'{{ csrf_token }}'
}
}
);
});
</script>
{% endblock %}

urls.py

    # 上传图片
path(r'upload_image/', views.upload_image),

views.py

 

import os
from BBS20230205 import settings
def upload_image(request):
back_dic = {'error': 0, }
if request.method == 'POST': file_obj = request.FILES.get('imgFile')
file_dir = os.path.join(settings.BASE_DIR, 'media','article_img')
if not os.path.isdir(file_dir):
os.mkdir(file_dir)
file_path = os.path.join(file_dir, file_obj.name)
with open(file_path, 'wb') as f:
for line in file_obj:
f.write(line)
back_dic['url'] = '/media/article_img/%s' %file_obj.name
return JsonResponse(back_dic)

经过我的百度,终于找到了答案:只需要在settings.py中写下面一句代码:

X_FRAME_OPTIONS = 'ALLOWALL'

赶紧记录成博客,让大家也可以避坑,自己下次也可以方便找到答案!!!

Django3.X使用富文本编辑器kindereditor上传图片时一直转圈圈,如何解决的更多相关文章

  1. django-应用中和amdin使用富文本编辑器kindeditor

    文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...

  2. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  3. Django使用富文本编辑器

    1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...

  4. Django实现的博客系统中使用富文本编辑器ckeditor

    操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...

  5. Django后台管理admin或者adminx中使用富文本编辑器

    在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...

  6. flask项目中使用富文本编辑器

    flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...

  7. vue+element-ui 使用富文本编辑器

    npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...

  8. 使用富文本编辑器Kindeditor

    今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...

  9. vue中是使用富文本编辑器vue-quill-edit

    之前使用的富文本编辑器是uEditor,kindEditor,感觉不太方便 近期项目vue单页面,就使用这个编辑器组件吧! 一.安装  cnpm install vue-quill-editor 二. ...

  10. webform 使用富文本编辑器

    <div class="form-group"> <label class="col-xs-2 control-label text-right&quo ...

随机推荐

  1. Git配置和使用?Git你真的会用么?Git与SVN的主要区别

    1.Git环境配置    在学习Git之前,首先要知道什么是版本控制 1.1 版本控制:版本迭代.新的版本!版本管理器 版本控制是开发过程中用于管理我们的文件.目录或工程内容的修改内容,查看修改历史记 ...

  2. 解决“fast-forward, aborting”问题

    1. 现象 对某一个远程仓库 git pull 过程中,报错如下: # zl @ srv123 in ~/git/radxa/kernel [14:09:54] $ git pull remote: ...

  3. Go语言核心36讲28

    我在前面用20多篇文章,为你详细地剖析了Go语言本身的一些东西,这包括了基础概念.重要语法.高级数据类型.特色语句.测试方案等等. 这些都是Go语言为我们提供的最核心的技术.我想,这已经足够让你对Go ...

  4. wiki搭建详细过程及步骤

    wiki搭建详细过程及步骤 1.查看yum库中jdk的版本 2.选择java-1.8.0安装 3.配置环境变量 4.环境变量生效 5.查看jdk是否安装成功 6.启动mysql服务 7.下载confl ...

  5. i春秋123

    打开是个普普通通的登录窗口,下尝试根据提示12341234进行输入,发现不正确...可能1234是指步骤,然后查看源码 发现了绿色的提示信息,我们就根据提示试试打开user.php 打开是白板网页,源 ...

  6. vue脚手架安装及依赖

    一.安装Vue Cil (脚手架) 需要先安装node.js,这是node官网地址: https://nodejs.org/en/download/ ,node有两种版本一种是稳定版一种开发版 安装完 ...

  7. 我要涨知识——TypeScript 常见面试题(二)

    又是一个年底来了,好大一批人可能又准备跑路了,最近回家待产,翻了翻掘金和 CSDN 发现好多大佬都有大厂 Offer ,看着看着我心动了! 话不多说,赶紧开干,给自己整了一个前端面试小助手--微信小程 ...

  8. 【终极解决办法】pyinstaller打包exe没有错误,运行exe提示Failed to execute script 'mainlmageWindows' due tounhandled exception: No module named 'docx'

    一.通过pyinstaller打包exe可执行文件,由于我的py是多个,所以要先生成spec文件,代码如下: pyi-makespec mainImageWindows.py 此时生产了一个mainI ...

  9. PW6276是一颗高效同步升压转换芯片,内部集成低阻抗功率 MOS

    概述PW6276是一颗高效同步升压转换芯片,内部集成低阻抗功率 MOS. 具有短路保护功能内部集成软启动电路,无需外部补偿电容,外部反馈网络.PW6276采用 SOP8-EP 封装配合较少的外围原件使 ...

  10. selenium常用配置

    def init_chrome_options(self,): chrome_options = webdriver.ChromeOptions() # 设置浏览器初始 位置x,y & 宽高x ...