javascript - 使用 fetch 将文件和数据发送到服务器

Question

我正在尝试使用 fetch 向服务器发送一个包含数据和文件的对象。

我的对象如下所示：

var myData = {
    id: 1,
    title: 'First project',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    img: '/media/images/article-image-3.jpg',

    ProjectImages: [
        {
            id: 1,
            img: '/media/images/article-image-1.jpg',
            createdAt: '2018-07-21T18:30:46.000Z',
            updatedAt: '2018-07-21T18:30:46.000Z',
            ProjectId: 1,
            imgFile_0: {
                lastModified: 1527323312000,
                name: 'article-image-1.jpg',
                size: 133149,
                type: 'image/jpeg',
                webkitRelativePath: '',
                __proto__: File,
            },
        },
        {
            id: 2,
            img: '/media/images/article-image-2.jpg',
            createdAt: '2018-07-21T18:30:46.000Z',
            updatedAt: '2018-07-21T18:30:46.000Z',
            ProjectId: 1,
            imgFile_1: {
                lastModified: 1527323312000,
                name: 'article-image-2.jpg',
                size: 133149,
                type: 'image/jpeg',
                webkitRelativePath: '',
                __proto__: File,
            },
        },
    ],
    rating: 2,
    ArticleId: 1,
    timestamp: '2016-03-13T00:12:09.000Z',
    createdAt: '2018-07-21T18:30:46.000Z',
    updatedAt: '2018-07-21T18:30:46.000Z',
    Tags: [],
    imgFile: {
        lastModified: 1527323312000,
        name: 'article-image-1.jpg',
        size: 133149,
        type: 'image/jpeg',
        webkitRelativePath: '',
        __proto__: File,
    },
};

如您所见，有一些名称为 的键imgFiles，其中包含文件。无法对这些imgFiles对象进行字符串化。

我想通过 fetch 将所有这些数据发送到服务器。我尝试将其转换为FormDatawith json-form-data：文件req.files由https://www.npmjs.com/package/express-fileupload添加，并且req.files是可迭代的；但是添加到的数据req.body是以这种方式形成的，我无法对其进行迭代：

{
    'id': '1',
    'title': 'First project',
    'description':
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
    'img': '/media/images/article-image-1.jpg',
    'ProjectImages[0][id]': '1',
    'ProjectImages[0][img]': '/media/images/article-image-1.jpg',
    'ProjectImages[0][createdAt]': '2018-07-21T18:40:52.000Z',
    'ProjectImages[0][updatedAt]': '2018-07-21T18:40:52.000Z',
    'ProjectImages[0][ProjectId]': '1',
    'ProjectImages[1][id]': '2',
    'ProjectImages[1][img]': '/media/images/article-image-2.jpg',
    'ProjectImages[1][createdAt]': '2018-07-21T18:40:52.000Z',
    'ProjectImages[1][updatedAt]': '2018-07-21T18:40:52.000Z',
    'ProjectImages[1][ProjectId]': '1',
    'rating': '2',
    'ArticleId': '1',
    'timestamp': '2016-03-13T00:12:09.000Z',
    'createdAt': '2018-07-21T18:40:52.000Z',
    'updatedAt': '2018-07-21T18:40:52.000Z',
};

所以，我的问题是：

A. 通过 fetch 沿文件发送数据的最佳方式是什么？

B. 可以在普通物体中转换这种结构吗？

---

编辑：

看起来FormData无法处理嵌套结构。是一种简单的一级深度key: value数据结构。因此，要么我只使用 FormData 来发送文件并发送字符串化的数据，要么我寻找另一种选择。

任何想法都会受到欢迎！

标签： javascriptpostfetch