通过提取将文件和数据发送到服务器

时间:2018-07-21 18:47:51

标签: javascript post 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个对象进行字符串化。

我想通过获取将所有这些数据发送到服务器。我尝试使用json-form-data将其转换为FormData:文件由https://www.npmjs.com/package/express-fileupload添加到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。通过提取沿文件发送数据的最佳方法是什么?

B。可以在普通对象中转换这种结构吗?


编辑:

looks like FormData无法处理嵌套结构。是一种简单的一级深度key: value数据结构。因此,要么我只使用FormData来发送文件并发送经过字符串化的数据,要么我正在寻找另一个选项。

任何想法都会受到欢迎!

0 个答案:

没有答案