Django不使用DRF 如何将含图片的form-data数据转为JSON

你当前的错误本质是请求格式和解析方式不匹配：

• 前端发的是multipart/form-data格式请求（用于上传文件的标准编码格式），不是JSON格式，直接对request.body执行json.loads肯定解析失败
• 你当前捕获的AttributeError: 'bytes' object has no attribute 'read'，是因为部分解析逻辑误把二进制类型的request.body当成文件对象调用了read()方法
• 当前请求体里的[object File],[object File]说明前端传文件的逻辑也有问题，这是JS把File对象直接转字符串的错误结果，不是真实的文件二进制内容

Django自带了form-data的解析能力，不需要手动解析原始请求体，直接用两个内置属性即可：

• request.POST：获取所有普通表单文本字段，对应你业务里的username、password、手机号等字段
• request.FILES：获取所有上传的二进制文件字段，对应你业务里的images图片字段

修改后的视图代码示例：

import json
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def registerSeller(request):
    if request.method == "POST":
        # 直接读取普通文本字段
        data_dict = {
            "username": request.POST.get("username"),
            "password": request.POST.get("password"),
            "phonenumber": request.POST.get("phonenumber"),
            "email": request.POST.get("email"),
            "shop_description": request.POST.get("shop_description"),
            "shop_name": request.POST.get("shop_name"),
            "image_paths": []
        }
        # 读取上传的多图文件
        image_files = request.FILES.getlist("images")
        for img in image_files:
            # 示例：将文件保存到本地，你也可以上传到对象存储
            save_path = f"./upload_images/{img.name}"
            with open(save_path, "wb+") as f:
                for chunk in img.chunks():
                    f.write(chunk)
            # 把文件存储路径存入字典
            data_dict["image_paths"].append(save_path)
        
        # 此时data_dict可以直接用json.dumps序列化为JSON格式
        json_data = json.dumps(data_dict, ensure_ascii=False)
        # 后续继续处理你的业务逻辑

注意：form-data里的二进制文件无法直接序列化为JSON格式，必须先把上传的文件保存到服务器本地或者对象存储服务，将得到的文件访问/存储路径存入字典后，再整体序列化为JSON。

你当前请求体里的[object File]是前端构造form-data的方式错误导致的，正确的JS构造示例：

const formData = new FormData()
// 添加普通文本字段
formData.append('username', 'abe7')
formData.append('password', '123')
formData.append('shop_name', 'name new')
// 多文件要逐个append，不要直接传入File数组
const fileInput = document.querySelector('input[type="file"][multiple]')
for (let i = 0; i < fileInput.files.length; i++) {
  formData.append('images', fileInput.files[i])
}
// 发请求不要手动设置Content-Type头，浏览器会自动带上正确的boundary参数
fetch('/registerSeller', {
  method: 'POST',
  body: formData
})

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