如何处理 Node js FormData 中的复杂负载

Question

我有以下 JSON 格式，我需要将其发送并保存到数据库。

[
  {
    "title": "Tilte",
    "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
    "image": //IMAGE FILE
  },
  {
    "title": "Tilte",
    "images": [
      //IMAGE FILES
    ]
  },
    {
    "title": "Tilte",
    "image": //IMAGE FILE
  },
]

这里的数组包含未知长度的数据，有些包含图片文件上传，有些包含多个图片文件上传。我已经在 Laravel 服务器中看到过这个工作。但我不知道如何用 Node JS 来实现这一点。而且我只看到了一种在 formdata 中传递数组的方法，即在 Stringify 数组之后。但在这种情况下，由于文件的原因我无法这样做。当数组长度很大而 String 无法携带时会发生什么。

Answer 1

在将其发送到 API 之前，从客户端对您的图像文件进行相应编码。一旦编码后，你的有效负载就会像这样。

[
    {
        "title": "Tilte",
        "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "image": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAw"
    },
    {
        "title": "Tilte",
        "images": [
            "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgF", "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgF"
        ]
    },
    {
        "title": "Tilte",
        "image": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwME5I"
    }
]

然后可以将其传递给您的后端API。

如果您不知道如何实现 Node js 服务器，请参阅以下步骤：

1. 安装

   npm install express multer

2. 创建 app.js 文件，在下面添加以下行：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const port = 3000;

// Set up Multer for handling file uploads
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  },
});

const upload = multer({ storage: storage });

app.use(express.json());

app.post('/upload', upload.single('image'), (req, res) => {
  // Handle the uploaded data here
  const { title, content, images } = req.body;
  const image = req.file;

  console.log('Received Data:');
  console.log('Title:', title);
  console.log('Content:', content);

  if (image) {
    console.log('Image:', image.filename);
  }

  if (images && Array.isArray(images)) {
    console.log('Images:', images);
  }

  res.send('Data uploaded successfully!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

3. 在 app.js 文件所在目录下创建 uploads 文件夹，用于存储上传的图片。

4. 使用

   node app.js

   运行节点服务器

5. 使用下面的CURL命令上传图片或图片

   curl -X POST -H "Content-Type: application/json" -d '[ { "title": "Title", "content": "Lorem Ipsum is simply dummy text...", "image": "@/path/to/your/image.jpg" }, { "title": "Title", "images": [ "@/path/to/your/image1.jpg", "@/path/to/your/image2.jpg" ] }, { "title": "Title", "image": "@/path/to/your/image3.jpg" } ]' http://localhost:3000/upload

注意：确保将 @/path/to/your/image.jpg 替换为图像文件的实际路径。