Vue使用FormData提交多对象如何适配Django序列化器批量入库要求

直接在前端构造FormData时使用带索引的嵌套字段命名规则，后端框架会自动解析为你需要的数组对象结构，无需额外手动重组。

核心原理 #

绝大多数服务端Web框架（你当前使用的Django系列框架也支持）可以自动解析符合数组名[索引][字段名]命名规范的表单字段，直接映射为结构化的数组对象，无需额外处理。

修改后的前端代码 #

addImages(id) {
  const formData = new FormData();
  // 循环时取索引，按嵌套结构命名字段
  this.imageArray.forEach((element, index) => {
    formData.append(`images[${index}][product]`, id);
    formData.append(`images[${index}][image]`, element);
  });
  
  let config = {
    headers: {
      Authorization: `Bearer ${this.$store.state.accessToken}`
      // 注意：不要手动设置Content-Type为multipart/form-data，axios会自动识别FormData并补充正确的boundary参数，手动设置反而会导致解析失败
    },
  };
  axios.post(`http://127.0.0.1:8000/images/`, formData, config);
},

后端使用方式 #

修改后你在后端直接取request.data['images']就可以直接得到符合要求的结构：

[
    {'product':'31','image': <InMemoryUploadedFile: allstar.jpg (image/jpeg)>},
    {'product':'31','image':<InMemoryUploadedFile: cat.jpeg (image/jpeg)>}
]

直接传给批量写入的ORM方法即可，完全不需要手动拼接重组的逻辑。

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