图片通过django REST framework从vue上传到amazon s3的富文本字段

Question

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

但我对从 vue 通过 CKEditor 上传图片的用法感到困惑。

正在 django-admin 中将图像上传到 S3。但是我不知道如何序列化 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)

urls.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;

    return this.loader.file
        .then( uploadedFile => {
            return new Promise( ( resolve, reject ) => {
            const data = new FormData();
            data.append( 'upload', uploadedFile );

            axios( {
                url: '/challenges/uploadsCK/',
                method: 'post',
                data,
                headers: {
                    'Content-Type': 'multipart/form-data;'
                },
                withCredentials: false
            } ).then( response => {
                if ( response.data.result == 'success' ) {
                    resolve( {
                        default: response.data.url
                    } );
                } else {
                    reject( response.data.message );
                }
            } ).catch( response => {
                reject( 'Upload failed' );
            } );

        } );
    } );
}

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

感谢任何帮助。

Answer 1

经过非常累人的尝试 - 错误会话后，我通过检查 django-admin 行为找到了解决方案。当我上传图片时，我得到了上传端点和中提琴的路径！只需为 ckfinder 添加以下路径。

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

p.s: 可以使用相对路径

图片通过django REST framework从vue上传到amazon s3的富文本字段

Image upload to the rich text field from vue to amazon s3 via django REST framework

django

vue.js

django-rest-framework

ckeditor

ckeditor5