使用包含File的JSON对象的POST请求

Question

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

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

img属性只是一个File对象。

---

我想做的事

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

---

我尝试过的：

因此，一种似乎有效的方法是创建一个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' }

---

这种方法的问题

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

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

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)
  })