在 HTTP 请求中解析 JSON 中的图像

Question

我在我的 React 应用程序中发送了一个请求，其中包含一个带有各种字段的 JSON 正文，其中有一个 File 类型图像的数组。

const body = {
  title: 'title',
  price: 100,
  images: [...]
};

axios.post(url, body);

这不起作用，images 数组到达 Express 应用程序时为空。 我咨询了互联网并尝试使用FormData。但是，我看到的所有解决方案（example）都只有图像，即

const images = [...];
const data = new FormData();
images.forEach(img => data.append(img.title, img));

但我想要整个东西——文本和图像，因为这个输入应该进入 MongoDB。 我试过简单地将整个对象放在FormData：

const data = new FormData();
data.append('body', body);

但我一定不明白 FormData 的实际工作原理，因为在 Express 中尝试 iterate over 和 req.body 只会产生任何结果：

app.get((req, res) => {
  const data = Object.fromEntries(req.body) // yields nothing
}

使用multer 之类的任何其他尝试都强化了我做错了什么，因为我一生都无法获得非空的请求正文。

我想做的是能够发送完整的 HTTP 数据主体，其中包括文本、数字和图像数组，这样我就可以在 Express 应用程序上将这些图像保存到磁盘。 任何好的建议将不胜感激。

Answer 1

您不能使用 json 来发送图像（不是原始文件），但是有一个带有表单数据的选项。 首先，您必须将文件与普通数据分开，并将普通数据解析为字符串。

const images = [...];
const body = new FormData();
// you have to put the images in the same field, and the server will recibe an array
images.forEach(img => body.append('images', img));
// the other data to send
const data = {
  someData: true,
  moreData: 1,
arrOfNormalData: [23,10];
}
const parsedData = JSON.stringify(data);
body.append('_jsonData', parsedData);
axios.post(url, body);

您在请求的_jsonData 字段中将json 数据作为字符串发送。 然后在你的节点服务器上，你必须在配置它 ej 上安装 multer

const path = require('path');
//this is for a ramdom id for file name
const { nanoid } = require('nanoid');
const multer = require('multer');

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, nanoid() + path.extname(file.originalname));
  }
})
 
const upload = multer({ storage: storage });

然后你可以创建一个中间件来将数据（记住我们将它转​​换为字符串）解析为一个对象。

const parseJson = (field = '_jsonData') => {
    return (req, res, next) => {
        if (req.body[field] && typeof req.body[field] === 'string') {
            req.body = JSON.parse(req.body[field]);
        }
        next();
    };
};

然后让我们在我们的路由中使用

app.get(upload.array('images',10),parseJson(),(req, res) => {
  const data = req.body;// here the json data
const files = req.files;// here the uploaded files
}

我们添加了upload.array('images',10)，其中images 是文件字段，10 是最大文件数 我们添加了我们的 parseJons 中间件来将stirng解析为json 希望它对您有所帮助，并且不要使用base64，如果您使用base64，您可能会遇到问题。使用表单数据 附言。对不起，我的英语不太好。