javascript - 带有包含文件的 JSON 对象的 POST 请求

Question

我有一个像这样的 JSON 对象:

const people = {
  admin: {
    name: 'john',
    avatar: {
      img: File
    }
  },
  moderator: {
    name: 'jake',
    avatar: {
      img: File
    }
  }
};

img 属性只是一个 File对象。

---

我想做什么

我想将此数据作为 POST 请求发送到我的 Node 服务器。

---

我尝试过的:

因此，一种似乎可行的方法是创建一个 FormData 对象，然后手动将每个属性附加到它，如下所示:

client.js

let formData = new FormData();

formData.append('admin-name', people.admin.name);
formData.append('admin-avatar', people.admin.avatar.img);
formData.append('moderator-name', people.moderator.name);
formData.append('moderator-avatar', people.moderator.avatar.img);

fetch('/submit', { method: 'POST', body: formData })

server.js

import formidable from 'express-formidable';

router.use('/submit', formidable());

router.post('/submit', (req, res) => {
  console.log(req.files); // This contains the Files objects
  console.log(req.fields); // This has the rest of the data
  res.end();
});

服务器输出

{ 'admin-avatar': File {}, 'moderator-avatar': File {} }
{ 'admin-name': 'john', 'moderator-name': 'jake' }

---

这种方法的问题

我不喜欢这样做的主要原因是我必须手动附加每个字段。我不认为我可以循环执行此操作，因为在我的数据中，某些字段是嵌套对象。此外，在我的服务器中，数据不再像在原始对象中那样组合在一起。

有没有更好的方法来做到这一点？谢谢!

Answer 1

我认为没有任何干净/优雅的方法可以动态创建 FormData 对象。您可以通过使用 Object.keys() 遍历属性来解决重复性问题:

const people = {
  admin: {
    name: 'john',
    avatar: {
      img: {}
    }
  },
  moderator: {
    name: 'jake',
    avatar: {
      img: {}
    }
  }
}

const formData = new FormData()

Object.keys(people)
  .forEach(authority => {
    const { name, avatar: img } = people[authority]
    formData.append(`${authority}-name`, name)
    formData.append(`${authority}-avatar`, img)
  })