如何将图片/媒体文件从React上传到Django API？图片字段无报错无法保存

问题原因 #

你目前的代码有两处核心问题，导致图片无法正常保存：

1. 前端侧：上传文件不能用JSON格式传递，也无法通过e.target.value获取文件内容
2. 后端侧：创建数据时完全没有读取、写入图片字段的逻辑

前端代码修改 #

1. 修改状态初始化和changeHandler #

文件输入的读取逻辑和普通文本输入不同，需要单独处理：

// Input Change Handler
changeHandler(event){
    if(event.target.type === 'file'){
        this.setState({
            [event.target.name]: event.target.files[0]
        });
    }else{
        this.setState({
            [event.target.name]:event.target.value
        });
    }
}

2. 移除文件输入的value属性 #

文件输入是只读属性，强制绑定value会导致异常：

<tr>
    <th>Voucher</th>
    <td>
        <input name="image" onChange={this.changeHandler} type="file" className="form-control" />
    </td>
</tr>

3. 提交表单改用FormData传递数据 #

二进制文件不能通过JSON序列化传递，需要使用FormData格式，同时不要手动设置Content-Type请求头：

// Submit Form
submitForm(){
    // 新建FormData对象
    const formData = new FormData();
    formData.append('full_name', this.state.full_name);
    formData.append('image', this.state.image);
    formData.append('address', this.state.address);

    fetch('http://127.0.0.1:8000/api/orders/test',{
        method:'POST',
        body: formData,
        // 移除手动设置的Content-Type，浏览器会自动生成带boundary的正确头
    })
    .then(response=>response.json())
    .then((data)=>console.log(data));

    this.setState({
        full_name:'',
        image: '',
        address:''
    });
}

后端代码修改 #

1. 视图函数新增图片字段写入逻辑 #

Django REST Framework中上传的文件会保存在request.FILES中，创建数据时需要传入该字段：

@api_view(['POST'])
def add(request):
    data = request.data
    test = Test.objects.create(
            full_name = data['full_name'],
            address = data['address'],
            image = request.FILES.get('image') # 新增读取图片的逻辑
        )
    serializer = TestSerializer(test, many=False)
    return Response(serializer.data)

2. 确保序列化器包含image字段 #

检查你的TestSerializer是否已经把image字段加入字段列表，否则返回结果不会显示图片地址：

class TestSerializer(serializers.ModelSerializer):
    class Meta:
        model = Test
        fields = ['id', 'full_name', 'address', 'image'] # 确保image在列表内

额外配置检查 #

确认你的Django项目已经配置了媒体文件存储路径：

1. settings.py中新增配置：

MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/media/'

2. 项目根urls.py中新增媒体资源路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你原有路由
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

内容的提问来源于stack exchange，提问作者Sohanur Rahman Shanto 16209570