summernote图片上传到服务器
Summernote是一个开源的WYSIWYG编辑器。安装方便，使用简单。
在网页中引用相关的css和js就可以开始使用了。
在网页中定义一个summernote的div，然后在加载网页的时候初始化summernote：1
<div id="summernote" name="summernote"></div>
1 | $('#summernote').summernote({ |
这样就可以在网页中使用summernote来编辑富文本了。然后需要做的就是把通过编辑添加的图片保存到我们的服务器上以便后续展示使用。
在初始化summernote的时候加入一个图片上传的回调。
1
2
3
4
5
6
7
8
9
10$('#summernote').summernote({
height: 400,
lang: 'zh-CN',
callbacks: {
onImageUpload: function(files) {
// upload image to server and create imgNode...
uploadFile(files[0]);
}
}
});实现uploadFile方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17function uploadFile(file)
{
data = new FormData();
data.append("file", file);
$.ajax({
type: "POST",
url: "/upload",
data: data,
contentType: false,
processData: false,
success: function (filename) {
$('#summernote').summernote('insertImage', 'static/upload/'+filename, function ($image){
$image.addClass("img-responsive");
});
},
});
}实现后端服务器方法(我这里使用的是python)。
1
2
3
4
5
6
7
8
9
10class UploadHandler(BaseHandler):
def post(self):
upload_path = os.path.join(os.path.dirname(__file__), 'static/upload') # 文件的暂存路径
file_metas = self.request.files['file'] # 提取表单中‘name’为‘file’的文件元数据
for meta in file_metas:
filename = utils.get_timestamp()+meta['filename']
filepath = os.path.join(upload_path, filename)
with open(filepath, 'wb') as up: # 有些文件需要已二进制的形式存储，实际中可以更改
up.write(meta['body'])
self.write(filename)
这样，一个简单的summernote图片上传功能就实现了。