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

我试图使用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将所有这些数据发送到服务器。我尝试将其转换为

FormData

，方法是：通过将文件添加到

req.files

，并且

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发送文件并将数据字符串化，要么我寻找另一个选项

---

任何想法都欢迎

你是如何得到这些数据的？生成FormData最简单的方法是将表单元素传递给它

var data=newformdata（document.querySelector（“#myForm”）

我正在使用React，这是组件的状态。FormData不是必需的。是否不涉及表单？您无法序列化文件，因此必须使用FormData通过Fetch发送我有一个表单，但我不将其用于post/put数据。但您可以使用它填充FormData。只需将对表单元素的引用传递到新的FormData中