Simditor的图片上传（原理 + django实现）

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

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

http://blog.csdn.net/itmyhome1990/article/details/40374843

http://www.cnblogs.com/shawlang/p/4766681.html

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

http://simditor.tower.im/docs/doc-config.html#anchor-pasteImage

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

毕竟这么懒。

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

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

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

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

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

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

还没解释原理啊喂！

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

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

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

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

上传的流程就是：

我在前端上传图片，

upload中的filekey属性就是文件名，

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

然后在file_upload函数里，

file变量通过filekey属性（该文章是’upload_file’）来获取到该图片，

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

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

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

(这里还是要说一点，我们在上面设置file_path的时候是使用的是settings.MEDIA_ROOT, 结果我们在构造json的字段的时候这里变成了settings.MEDIA_URL,

因为

MEDIA_URL = '/uploads/'MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')

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

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

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