如何将Django Quill Editor中的图片保存至Amazon S3？

一、确认Django与S3基础配置 #

先确保你的Django项目已正确配置S3作为文件存储后端，以下是关键配置项（已配置可跳过，但需确认正确性）：

# settings.py
AWS_ACCESS_KEY_ID = '你的AWS访问密钥ID'
AWS_SECRET_ACCESS_KEY = '你的AWS秘密访问密钥'
AWS_STORAGE_BUCKET_NAME = '你的S3存储桶名称'
AWS_S3_REGION_NAME = '你的存储桶区域，例如us-east-1'
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.{AWS_S3_REGION_NAME}.amazonaws.com'
AWS_S3_FILE_OVERWRITE = False
AWS_DEFAULT_ACL = 'public-read'  # 若需私有存储可改为private

# 设置默认文件存储后端为S3
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

# 媒体文件URL指向S3地址
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/media/'

确保已安装依赖包：

pip install boto3 django-storages

二、自定义Quill图片上传视图 #

django-quill-editor默认使用本地存储，我们需要自定义视图处理上传逻辑，将图片直接保存到S3并返回对应URL：

# 你的app/views.py
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.core.files.storage import default_storage
from django.core.files.base import ContentFile
import uuid
import os

@csrf_exempt
def quill_image_upload(request):
    if request.method == 'POST' and request.FILES.get('image'):
        image_file = request.FILES['image']
        # 生成唯一文件名避免重复
        ext = os.path.splitext(image_file.name)[1]
        filename = f'quill_images/{uuid.uuid4().hex}{ext}'
        
        # 用默认存储（即S3）保存文件
        saved_file = default_storage.save(filename, ContentFile(image_file.read()))
        # 获取S3上的文件URL
        file_url = default_storage.url(saved_file)
        
        # 返回Quill编辑器要求的JSON格式
        return JsonResponse({'url': file_url})
    return JsonResponse({'error': '无效请求'}, status=400)

在项目urls.py中添加路由：

# urls.py
from django.urls import path
from your_app_name.views import quill_image_upload

urlpatterns = [
    # ... 其他路由
    path('quill/upload-image/', quill_image_upload, name='quill_image_upload'),
]

三、配置Django Admin中的QuillField #

修改Admin配置，让QuillField使用自定义的上传视图：

# 你的app/admin.py
from django.contrib import admin
from django_quill.admin import QuillModelAdmin
from .models import YourModel  # 替换为你的模型类

class YourModelAdmin(QuillModelAdmin):
    # 自定义Quill编辑器配置
    quill_config = {
        'toolbar': [
            # 保留需要的工具栏按钮，确保包含image选项
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{'header': 1}, {'header': 2}],
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{'script': 'sub'}, {'script': 'super'}],
            [{'indent': '-1'}, {'indent': '+1'}],
            [{'direction': 'rtl'}],
            [{'size': ['small', False, 'large', 'huge']}],
            [{'header': [1, 2, 3, 4, 5, 6, False]}],
            [{'color': []}, {'background': []}],
            [{'font': []}],
            [{'align': []}],
            ['link', 'image', 'video'],
            ['clean']
        ],
        # 配置图片上传的URL和CSRF令牌
        'imageUploader': {
            'url': '/quill/upload-image/',  # 对应自定义路由
            'headers': {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        }
    }

admin.site.register(YourModel, YourModelAdmin)

四、测试与注意事项 #

1. 启动Django服务，进入Admin页面打开目标模型表单，点击Quill工具栏的图片按钮上传本地图片
2. 上传完成后，编辑器会显示S3上的图片，数据库中存储的富文本内容里的图片URL为S3地址
3. 确保S3存储桶的CORS配置允许你的Django域名上传/访问图片，示例CORS配置：

   <CORSConfiguration>
     <CORSRule>
       <AllowedOrigin>https://你的Django域名.com</AllowedOrigin>
       <AllowedMethod>POST</AllowedMethod>
       <AllowedMethod>GET</AllowedMethod>
       <AllowedHeader>*</AllowedHeader>
       <ExposeHeader>ETag</ExposeHeader>
     </CORSRule>
   </CORSConfiguration>
   

4. 可根据需求调整文件名规则、存储路径（如quill_images/可自定义）

内容的提问来源于stack exchange，提问作者Vamshi