使用包含文件

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