完善富文本编辑器添加图片到服务端功能
服务端实现上传图片的API接口
视图代码：
from rest_framework.generics import CreateAPIView
from .models import ArticleImage
from .serializers import ArticleImageModelSerializer
class ImageAPIView(CreateAPIView):
queryset = ArticleImage.objects.all()
serializer_class = ArticleImageModelSerializer
序列化器：
from rest_framework import serializers
from .models import ArticleImage
class ArticleImageModelSerializer(serializers.ModelSerializer):
class Meta:
model = ArticleImage
fields = ("image",)
def create(self, validated_data):
instance = ArticleImage.objects.create(image=validated_data.get("image"),group=1)
return instance
路由代码：
from django.urls import path
from . import views
from rest_framework_jwt.views import obtain_jwt_token
urlpatterns = [
path("uploadimg/", views.ImageAPIView.as_view()),
]
客户端实现在富文本编辑器中用户添加图片时直接上传文件到服务端FastDFS系统。
<template>
<div class="write">
<div class="_2v5v5">
<div class="_3zibT"><a href="/">回首页</a></div>
<div class="_1iZMb">
<div class="_33Zlg" @click="collection_form=true"><i class="fa fa-plus"></i><span>新建文集</span></div>
<div class="_2G97m">
<form class="M8J6Q" :class="collection_form?'_2a1Rp':'_1mU5v'">
<input type="text" placeholder="请输入文集名..." name="name" class="_1CtV4">
<button type="submit" class="dwU8Q _3zXcJ _3QfkW"><span>提 交</span></button>
<button type="button" class="vIzwB _3zXcJ" @click="collection_form=false"><span>取 消</span></button>
</form>
</div>
</div>
<ul class="_3MbJ4 _3t059">
<li class="_3DM7w _31PCv" title="日记本">
<div class="_3P4JX _2VLy-">
<i class="fa fa-gear"></i>
<span>
<ul class="_2V8zt _3FcHm _2w9pn" :class="true?'':'NvfK4'">
<li class="_2po2r cRfUr" title="">
<span class=""><i class="fa fa-pencil-square-o _22XWG"></i>修改文集</span>
</li>
<li class="_2po2r cRfUr" title="">
<span class=""><i class="fa fa-trash-o _22XWG"></i>删除文集</span>
</li>
</ul>
</span>
</div>
<span>日记本</span>
</li>
<