Django如何将React传入的base64图片列表存入PostgreSQL数据库

Django的ArrayField（仅PostgreSQL支持）嵌套ImageField时，字段实际存储的是图片文件的路径字符串数组，图片文件本身会落到配置的MEDIA_ROOT对应目录下，不能直接传入base64字符串，需要先将base64转换为Django可识别的文件对象。

步骤1：编写base64转Django文件工具函数 #

直接复用下面的代码即可，会自动解析图片格式、生成无冲突文件名：

import base64
import uuid
from django.core.files.base import ContentFile

def b64_to_django_file(base64_data: str):
    # 拆分data URI头部与base64内容体
    meta, b64_content = base64_data.split(";base64,")
    # 提取图片后缀
    img_suffix = meta.split("/")[-1]
    # 解码base64为二进制内容
    img_binary = base64.b64decode(b64_content)
    # 生成随机文件名避免重名覆盖
    random_filename = f"{uuid.uuid4().hex}.{img_suffix}"
    return ContentFile(img_binary, name=random_filename)

步骤2：视图层处理逻辑 #

拿到前端传来的base64图片列表后，遍历转换为文件对象，直接赋值给模型字段即可，Django会自动完成文件写入、路径存储的全流程：

# 以DRF视图为例，普通Django视图逻辑一致
def post(self, request):
    # 校验普通业务字段
    name = request.data.get("name")
    description = request.data.get("description")
    b64_images = request.data.get("images", [])

    # 先创建模型实例
    hotel = Hotel.objects.create(name=name, description=description)
    # 批量转换base64为文件对象
    img_files = [b64_to_django_file(b64) for b64 in b64_images]
    # 赋值给ArrayField字段
    hotel.images = img_files
    hotel.save()
    return Response("ok")

注意：模型的ArrayField建议加上default=list参数，避免未传图片时触发非空校验错误。

你之前遇到的「JSON.stringify处理File对象后图片字段为空」的问题，完全不需要通过转base64解决，base64编码会让文件体积膨胀33%左右，既浪费传输带宽，又增加前后端编解码的性能开销，推荐直接用multipart/form-data格式提交请求：

前端传输改造 #

放弃纯JSON提交，改用FormData拼接普通字段和文件字段，不需要任何转码操作：

const submitForm = async (formValue, fileList) => {
  const formData = new FormData();
  // 拼接普通文本字段
  formData.append("name", formValue.name);
  formData.append("description", formValue.description);
  // 拼接图片列表，同字段多次append后端会自动识别为数组
  fileList.forEach(file => {
    formData.append("images", file.originFileObj || file);
  });
  // 发送请求时不要手动设置Content-Type，浏览器会自动生成带边界参数的请求头
  const res = await fetch("/api/hotel/", {
    method: "POST",
    body: formData
  });
  return res.json();
}

后端接收简化 #

如果用DRF，序列化器可以直接定义为images = serializers.ListField(child=serializers.ImageField())，拿到的直接是Django原生的InMemoryUploadedFile对象，不需要做base64解码，直接赋值给模型字段即可，代码量和性能损耗都能大幅降低。

• 不要将完整base64字符串直接存入PostgreSQL数据库：长文本读写性能差，后续做图片压缩、CDN加速、缩略图生成都非常麻烦，图片文件本身存文件系统/对象存储、数据库只存路径是行业通用方案
• 建议将ImageField的upload_to参数配置为按日期分目录的格式，比如upload_to='hotel_images/%Y/%m/%d/'，避免单个目录下文件数过多拖慢文件系统读取速度
• 如果后续业务需要对图片做单独的权限控制、关联其他元数据（比如上传人、排序、是否封面），建议不要用ArrayField存路径，改成单独建一张HotelImage关联表，外键绑定Hotel模型，扩展性更强。

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