React中如何将数组内字段（含图片）追加到FormData提交给Django REST Framework

要在FormData中传递包含文件的嵌套数组，只需按照Django DRF可识别的索引键名格式追加字段即可，无需修改后端现有序列化器逻辑，具体实现如下：

核心逻辑 #

multipart/form-data格式本身不支持直接传递嵌套结构，通过variants[索引值][字段名]的键名格式，DRF的MultiPartParser可以自动解析为你预期的数组结构，同时兼容普通字段和文件字段。

完整代码示例 #

handleSubmit = (e) => {
    e.preventDefault();
    let form_data = new FormData();
    // 追加产品基础字段
    form_data.append('image', this.state.image, this.state.image.name);
    form_data.append('name', this.state.name);
    form_data.append('services', this.state.services);
    form_data.append('merchant', this.state.merchant);
    form_data.append('brand', this.state.brand);
    form_data.append('best_seller', this.state.best_seller);
    form_data.append('top_rated', this.state.top_rated);
    form_data.append('collection', this.state.collection);
    form_data.append('description', this.state.description);
    form_data.append('featured', this.state.featured);
    form_data.append('availability', this.state.availability);
    form_data.append('warranty', this.state.warranty);
    form_data.append('rating', this.state.rating);
    // 追加category简单数组
    this.state.category.forEach(catId => {
        form_data.append('category[]', catId)
    })

    // 重点：追加variants数组及内部字段、图片
    this.state.variants.forEach((variant, index) => {
        // 追加变体普通字段
        form_data.append(`variants[${index}][product_id]`, variant.product_id)
        form_data.append(`variants[${index}][price]`, variant.price)
        form_data.append(`variants[${index}][size]`, variant.size)
        form_data.append(`variants[${index}][color]`, variant.color)
        form_data.append(`variants[${index}][quantity]`, variant.quantity)
        form_data.append(`variants[${index}][variant_availability]`, variant.variant_availability)
        // 变体图片存在时才追加
        if(variant.variant_image) {
            form_data.append(`variants[${index}][variant_image]`, variant.variant_image, variant.variant_image.name)
        }
    })

    let url = 'http://localhost:8000/api/addproducts';
    axios.post(url, form_data, {
      headers: {
        'content-type': 'multipart/form-data'
      }
    })
    // 补充你自己的请求回调逻辑即可
}

注意事项 #

FormData会自动将数字、布尔类型转为字符串，DRF的序列化器字段（如BooleanField、IntegerField）默认支持自动类型转换，无需额外处理。

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