通过django REST框架将图像从vue上传到amazon s3的富文本字段

我正在用Django测试Vue，并创建一个简单的博客

但我对从vue上传图像vie CKEditor的用法感到困惑

将图像上载到S3在django admin中起作用。但我不知道如何序列化RichTextUploadField并使其与vue一起工作

我的模型是

class Challenge(models.Model):

    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    title = models.CharField(max_length = 240)
    content = RichTextUploadingField(verbose_name='Code',null=True,blank=True)
    slug = models.SlugField(max_length=255, unique=True)
    author = models.ForeignKey(settings.AUTH_USER_MODEL,
                                on_delete=models.CASCADE,
                                related_name="challenges")
    image = models.ImageField(upload_to=upload_image_to, editable=True, null=True, blank=True)

    def __str__(self):
        return self.title

serializers.py

    author = serializers.StringRelatedField(read_only=True)
    created_at = serializers.SerializerMethodField()
    slug = serializers.SlugField(read_only=True)
    moments_count = serializers.SerializerMethodField()
    user_has_momented = serializers.SerializerMethodField()

    class Meta:
        model = Challenge
        exclude = ["updated_at"]

    def get_created_at(self, instance):
        return instance.created_at.strftime("%B %d %Y")

    def get_moments_count(self, instance):
        return instance.moments.count()

    def get_user_has_momented(self, instance):
        request = self.context.get("request")
        return instance.moments.filter(author=request.user).exists()

views.py

    queryset = Challenge.objects.all().order_by("-created_at")
    lookup_field = "slug"
    serializer_class = ChallengeSerializer
    permission_classes = [IsAuthenticated, IsAuthorOrReadOnly]

    def perform_create(self, serializer):
        serializer.save(author=self.request.user)

url.py

router.register(r"challenges", cv.ChallengeViewSet)

urlpatterns = [
    path("", include(router.urls)),
    path("challenges/<slug:slug>/moments/", cv.ChallengeMomentListAPIView.as_view(), name="answer-list"),
    path("challenges/<slug:slug>/moment/", cv.MomentCreateAPIView.as_view(), name="moment-create"),
    path("moments/<int:pk>/", cv.MomentRUDAPIView.as_view(), name="moment-detail"),
    path("moments/<int:pk>/like/", cv.MomentLikeAPIView.as_view(), name="moment-like"),
    path('ckeditor/', include('ckeditor_uploader.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

一切都如我所料。唯一的问题是通过vue.js上传图像，我不知道如何配置它

---

非常感谢您的帮助。

在一次非常累的试错之后，我通过检查django管理员的行为找到了一个解决方案。当我上传图像时，我得到上传端点和viola的路径！只需为ckfinder添加以下路径

        editorConfig: {
            ckfinder: {
                uploadUrl: "http://127.0.0.1:8000/ckeditor/upload/&responseType=json"
            }
        }

p、 你可以使用相对路径

        editorConfig: {
            ckfinder: {
                uploadUrl: "http://127.0.0.1:8000/ckeditor/upload/&responseType=json"
            }
        }