formData收到的对象在键上包含方括号，无法将其解析为Json

Question

我有一个前端应用程序，它发送一个包含数组的formData，所以我使用“对象到formdata”来解析以下对象：

{
        "profileImage": {
            "name": "5574c060-853b-4999-ba39-1c66d5329704",
            "size": 364985,
            "mimetype": "image/png",
            "url": "uploads/5574c060-853b-4999-ba39-1c66d5329704"
        },
        "skills": [],
        "lessonsFinished": [],
        "classes": [],
        "_id": "5e3c2f8c80776b12cc336fdf",
        "email": "[email protected]",
        "password": "$2b$10$iZ3/BuklZ1FCGlyQDPUyMOhcWAfei5yl.llYScbWIv12XWcsokrgS",
        "username": "adrian",
        "verified": false,
        "status": "student",
        "color": "blue",
        "verificationCode": "50SZWPCHDL685C",
        "__v": 0,
        "lastName": "Test",
        "name": "Test",
    }

对象包含对象和数组，当使用bodyParser和“ express-fileupload”作为文件管理器进行解析并发送到后端时，该对象使用express，我收到此对象：

{
    'profileImage[name]': '5574c060-853b-4999-ba39-1c66d5329704',   
    'profileImage[size]': '364985',
    'profileImage[mimetype]': 'image/png',
    'profileImage[url]': 'uploads/5574c060-853b-4999-ba39-1c66d5329704',
    'skills[]': '',
    'lessonsFinished[]': '',
    'classes[]': '',
    _id: '5e3c2f8c80776b12cc336fdf',
    email: '[email protected]',
    password: '$2b$10$iZ3/BuklZ1FCGlyQDPUyMOhcWAfei5yl.llYScbWIv12XWcsokrgS',
    username: 'adrian',
    verified: 'false',
    status: 'student',
    color: 'blue',
    verificationCode: '50SZWPCHDL685C',
    __v: '0',
    lastName: 'Test',
    name: 'Test',
  }

我似乎找不到一种将其解析为普通对象的方法，因为我需要使用完整对象作为猫鼬的查询参数。

我的Express配置如下：

const bodyParser = require('body-parser');
const fileUpload = require('express-fileupload');
const express = require('express');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(fileUpload())

最后，我有要接收formData的端点：

exports.create = function (model) {
    return async function (req, res, next) {
        try {
            let document = req.body;
            if (req.files) {
                Object.keys(req.files).forEach(key => {
                    let file = req.files[key]
                    file.mv(upload_dir + file.name, (err) => {
                        if (err) return res.status(500).send(err);
                    });
                    document[key] = {
                        name: file.name,
                        size: file.size,
                        mimetype: file.mimetype,
                        url: upload_dir + file.name
                    }
                })
            }
            const newDocument = await new model(req.body).save();
            res.status(200).send(newDocument);
        } catch (err) {
            return next({
                status: 500,
                message: err.message
            })
        }
    }
}

我收到的文件很好，其余的数据也很好，但是我找不到解析“编码”（如用括号括起来的）对象键的方法。我尝试构建一个递归函数来解码它们，但是几个小时后，我找不到解决方案，因此我发现必须已经有另一种方法可以工作了。

我尝试了此线程中提供的解决方案：How to convert FormData(HTML5 Object) to JSON，但那些解决方案只是创建了一个带有包含在键中的括号的对象...

谢谢您的帮助！

Answer 1

这不是最佳实践来转换您的key[array]，但是这次，也许您可​​以使用下面的代码将此[ key[array]对象转换为真实对象。

const myArrays = {
    'profileImage[name]': '5574c060-853b-4999-ba39-1c66d5329704',   
    'profileImage[size]': '364985',
    'profileImage[mimetype]': 'image/png',
    'profileImage[url]': 'uploads/5574c060-853b-4999-ba39-1c66d5329704',
    'skills[]': '',
    'lessonsFinished[]': '',
    'classes[]': '',
    _id: '5e3c2f8c80776b12cc336fdf',
    email: '[email protected]',
    password: '$2b$10$iZ3/BuklZ1FCGlyQDPUyMOhcWAfei5yl.llYScbWIv12XWcsokrgS',
    username: 'adrian',
    verified: 'false',
    status: 'student',
    color: 'blue',
    verificationCode: '50SZWPCHDL685C',
    __v: '0',
    lastName: 'Test',
    name: 'Test',
  };

  function parseFormDataToObject(formObject) {
    Object.keys(formObject).forEach((key, index) => {
      let firstIndex = key.indexOf('[');
      let lastIndex = key.lastIndexOf(']');
      
      if(firstIndex !== -1 && lastIndex !== -1) {
        let name = key.slice(firstIndex + 1, lastIndex);
        let newKey = key.slice(0, firstIndex);
        if(!name) {
          formObject[newKey] = [];
        } else {
          if(!formObject[newKey]) {
            formObject[newKey] = {};
          }
  
          // console.log(myArrays[key]);
          formObject[newKey][name] = formObject[key];
        }
        delete formObject[key];
      }
    });

    return formObject;
  };

  console.log(parseFormDataToObject(myArrays))

我希望它能为您提供帮助。

Answer 2

已解决！，我发现'express-fileupload'覆盖了bodyParser，并且它默认为拉平输出的选项，要解决此问题，请将fileupload设置为：

app.use(fileUpload({
     parseNested: true 
}));