React+Django博客添加图片上传功能遇问题，求解决方案

当前传递图片的方式是否正确？ #

完全错误，核心问题有两个：

• JSON无法序列化File对象，JSON.stringify({image: image})会把文件转为空对象{}，后端根本接收不到真实文件数据。
• 手动设置Content-Type: application/json与文件上传需要的multipart/form-data格式冲突，且会破坏浏览器自动生成的表单分隔符（boundary）。

解决步骤 #

前端修改（React组件） #

1. 改用FormData传递数据：文件上传必须用multipart/form-data格式，FormData会自动处理这种格式，无需手动拼接。
2. 移除错误的请求头：不要手动设置Content-Type，浏览器会自动为FormData生成正确的请求头及boundary。
3. 修正表单提交逻辑：

修改后的submit函数：

const submit = async e => {
    e.preventDefault();     
    
    const formData = new FormData();
    formData.append('author', userID);
    formData.append('title', title);
    formData.append('text', text);
    if (image) {
        formData.append('image', image); // 仅当有图片时添加
    }
    
    fetch('http://localhost:8000/api/make-post/', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        console.log(response)
        if(response.ok){
            return response.json();
        }
    })
    .catch(error => {
        console.log(error)
    })
}

同时修正按钮的触发逻辑（移除重复的onClick，让表单的onSubmit单独处理）：

<button type="submit" className="btn btn-primary">Post</button>

后端检查与配置（Django） #

1. 配置媒体文件存储路径：
   在settings.py中添加以下配置，确保上传的图片能被正确存储和访问：

MEDIA_ROOT = BASE_DIR / 'media'  # 图片存储的本地路径
MEDIA_URL = '/media/'            # 访问图片的URL前缀

2. 配置媒体文件路由：
   在项目根目录的urls.py中添加静态文件路由，让Django能正确返回上传的图片：

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

urlpatterns = [
    # ... 你的其他路由配置
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3. 确认序列化器配置：
   确保PostSerializer包含image字段，默认的ModelSerializer会自动包含模型所有字段，若自定义了fields列表，需手动添加image：

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = ['id', 'author', 'title', 'text', 'image', 'posted', 'updated']  # 确保包含image

关键注意事项 #

• 上传文件时，必须使用FormData，不能用JSON序列化。
• 不要手动设置multipart/form-data的请求头，浏览器会自动处理boundary，手动设置会导致后端无法解析表单数据。
• 确保Django的MEDIA_ROOT目录存在且有读写权限，否则图片无法保存。

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