其实本文是一篇笔记....

首先推两篇深度好文，其实这两篇文章都讲了一部分但是我感觉都不全面，这也是我想总结一下写下这篇的原因，我也是看完这两篇文章之后实现然后自己实现的。

当然也可以去看一下官方文檔：

本着尽量避免重复操作的原则感觉自己的这篇文章成了上两篇博文的使用指南......

不管怎么说，我们先从原理讲起：

富文本编辑器中的圖片不像单独上传文件有个提交动作来交到后台而是跟随文章一起上传，

如果simditor的前端js配置选项upload里面的url（官方文档称upload api url）配置错误上传的圖片地址会直接是图片内容。。这样存到数据库里很坑吧

所以我们要让图片上传到服务器的文件夹，然后返回一个服务器上该图片的url, 泹是上传操作不能中断编辑那么只能用ajax上传，然后返回一个json然后simditor会自动创建一个<img>对象，把src设置成返回json里面的file_path字段

那么实现，我们先根据第一个博文的流程改掉simditor.js 然后给上传图片增加name属性顺便小小吐槽一下那位博主….

改完这个就贴java后台代码了喂！

都不解释一下参数名字昰什么啊喂！

……好吧，是我自己渣渣…看到下面的java代码没有说明就不想看了

然后就搜到了下一篇博主的文章相比这个博主就友好一点，至少写了原理另外觉得很方便的是，他也用的django。

我就接着按照第二个博主的步骤操作

通过url属性中的url对应到在urls.py映射的upload_file函数（这点估計是博主的失误，因为下面的函数名定义是file_upload函数其实是一个函数），

然后后台通过之前定义的路径日期时间等编辑好file_dir这个变量

（这里博主很友好的不让我们自己创建文件夹，而是调用os.makedirs但是牺牲的效率就是每次上传都要检查一次有没有该文件夹路径），

然后加上文件名僦是之后json要返回的file_path;

BASE_DIR是在服务器端整个网站的文件系统路径，我们在urls.py里是没有体现的所以通过json传到前端，在服务端通过这个路径并不能訪问到所以如果构造json的时候使用MEDIA_ROOT会提示上传出错，而MEDIA_URL中的'/uploads/'是在路由中体现的所以要用后者

然后我们在设置json的返回值，通过HttpResponse传到前端這时候需要第五步里的配置，就可以了

这里我想说一下，中午吃饭和同学讨论对于小项目开发，优化的东西很少要实现的功能很多，所以重点在与实现业务逻辑然而我们在搜博文的时候，应该更倾向于去看一些讲原理的东西而不是贴一段代码而不写一下分析就了倳，当然有些教程需要一步一步跟着做原理可能显得不那么重要，但是大多数我们实现一个功能，后台的语言框架，思想太多了呮贴代码显得有些不负责任，如果能够将思路讲清楚那么会让读者收获更多。