media目录是在project的settings中设置的，static目录是django自己使用的静态文件的上传目录，media目录是用户自定义上传文件的目录

# Django用户上传的文件都放在media目录下

MEDIA_URL = "/media/"

MEDIA_ROOT = os.path.join(BASE_DIR,"media")

　　

我们这样设置了，django还是找不到我们的media目录，还需要在路由系统系统设置，我们这里在django的一级路由中设置

首先需要导入2个模块

from django.conf import settings

from django.views.static import serve

　　

然后定义路由映射的关系，这个是固定写法

url(r'^media/(?P<path>.*)$', serve, {"document_root": settings.MEDIA_ROOT}),

　　

然后我们就可以使用media目录存储我们上次的文件，django就可以找到这个目录下的文件了

先看下我们的富文本编辑器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/css/bootstrap-theme.css">

</head>

<body>

<h2>{{ auther }}个人博客站点管理后台</h2>

<h3>文章标题</h3>

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

    {% csrf_token %}

    <label for="article_id"></label><input type="text" id="article_id" placeholder="文章标题" name="new_article_name">

    <h3>文章内容</h3>

    <textarea name="new_article_content" cols="70" rows="20" id="editor_id">

    </textarea>

    <input type="submit" value="提交" class="btn btn-success">

</form>

<script src="/static/jq/jquery-3.3.1.js"></script>

<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>

{#<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>#}

<script>

        KindEditor.ready(function(K) {

                window.editor = K.create('#editor_id',{

                width : '1200px',

                item:[

                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',

                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',

                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor',

                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',

                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',

                    'anchor', 'link', 'unlink', '|', 'about'

                ],

                    uploadJson:"/app1/upload/",

                    extraFileUploadParams:{

                        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()

                    },

                    filePostName:"upload_img"

                });

        });

</script>

</body>

</html>

　　

前端的效果是

这里我们点击上传文件，看下后台的视图函数的处理，把上传的文件写到media目录中，然后把写的图片的地址返回到前端，富文本编辑器就会去找media中找到对应的路径，然后渲染到前台页面上

from bbs import settings

from django.http import JsonResponse

import os

def upload(request):

    print(settings.MEDIA_ROOT,type(settings.MEDIA_ROOT))

    file_obj = request.FILES.get("upload_img")

    upload_path = os.path.join(settings.MEDIA_ROOT,"upload",file_obj.name)

    with open(upload_path,"wb") as f:

        for line in file_obj:

            f.write(line)

    res={

        "error":0,

        "url":"/media/upload/"+file_obj.name

    }

    return HttpResponse(json.dumps(res))

　　

我们看下media目录下就有我们上传的文件了

由于我们在django的路由系统设置了media的路由映射关系，所以我们都可以直接通过页面访问我们的图片

bbs项目富文本编辑器实现上传文件到media目录的更多相关文章

  1. 给Django后台富文本编辑器添加上传文件的功能

    使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...

  2. Python3+Selenium3+webdriver学习笔记9（发送富文本信息及上传文件处理）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)'''from seleni ...

  3. layui 魔改：富文本编辑器添加上传视频功能

    甲方又整新需求了:富文本编辑器需要可以传视频. layui本身的富文本编辑器没有传视频的功能,所以,又到了咱们魔改的时候了. 友情提醒,富文本编辑器 layedit 只有layui的V1版有,V2版没 ...

  4. 关于百度Editor富文本编辑器 自定义上传位置

    因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...

  5. Kindeditor JS 富文本编辑器图片上传指定路径

    js //================== KindEditor.ready(function (K) { var hotelid = $("#hotelid").val(); ...

  6. kindeditor富文本框，上传文件后，显示文件名称

    kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...

  7. SpringBoot项目打成jar包后上传文件到服务器 目录与jar包同级问题

    看标题好像很简单的样子,但是针对使用jar包发布SpringBoot项目就不一样了.当你使用tomcat发布项目的时候,上传文件存放会变得非常简单,因为你可以随意操作项目路径下的资源.但是当你使用Sp ...

  8. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

  9. egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名

    egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...

随机推荐

  1. Django--templates(模板层)

    模板语法: """ 模板语法: 变量:{{}} 1.深度查询 句点符 2.过滤器 {{value|filter_name:参数}} 标签:{% %} "&quo ...

  2. JSP页面java代码报错:Purgoods cannot be resolved to a type

    错误提示 : Purgoods cannot be resolved to a type Purgoods不能解析为一个类型 原因 : 缺少引入Purgoods类 页面中引入java类,执行java代 ...

  3. iOS 视图间的几种通信方式

    注:此处视图为广义上的视图,不限于View,ViewController之类的都算. 大致分为三种,Notification, delegate, block 例: 假设要在A视图中调起B视图,B视图 ...

  4. 剑指OFFER例题——从尾到头打印链表

    /** * public class ListNode { * int val; * ListNode next = null; * * ListNode(int val) { * this.val ...

  5. HTML实现页面自动跳转的五种方法

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1)html的实现 复制代码 代码如下: <head> ...

  6. shell-保留文件系统下剩余指定数目的文件

       path_backup=/mnt/fifth/backup/shellbackup  path_delete=/mnt/fifth/tmp/rubbish/  limit_num=15    f ...

  7. HBase 1.2.6 完全分布式集群安装部署详细过程

    Apache HBase 是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,是NoSQL数据库,基于Google Bigtable思想的开源实现,可在廉价的PC Server上搭建大规模结构化存 ...

  8. JVM不稳定参数

    -XX 参数被称为不稳定参数,之所以这么叫是因为此类参数的设置很容易引起JVM 性能上的差异,使JVM 存在极大的不稳定性.当然这是在非合理设置的前提下,如果此类参数设置合理讲大大提高JVM 的性能及 ...

  9. js获取url传值的方法

    这篇文章主要介绍了js获取url传值的方法,实例分析了字符串分割与正则分析两种方法,并补充了一个基于正则匹配实现的js获取url的get传值函数,需要的朋友可以参考下 js获取url参数值: inde ...

  10. Mat取行或列

    Mat dst; dst = FeatureValue.colRange(j,j+).clone(); 直接使用Mat类中成员函数,方法,colRange对应的是列,rowRange对应的是行,从第j ...