如何在formData中发送多维数组答案

【问题标题】：How to send multi-dimensional array in formData如何在formData中发送多维数组
【发布时间】：2021-05-06 12:06:14
【问题描述】：

我必须将多个图像发送到映射到多个键（变体）的服务器。假设我有两个变体，因此一个数组将是变体，即variant = [a ,b]，而另一个数组应包含与每个变体相对应的图像（多个图像），例如images = [[File, File], [File, File, File]]，因此两个嵌套数组按照索引即variant[0] 有图像images[0]。同样，variant[1] 的图像在images[1] 中（三个图像）。

现在，我必须将这些数据从 React.js 中的前端发送到后端，使用变体很简单，就像这样。

const formData = new FormData()
const variants = [a, b, c]
for (let key of variants) {
  formData.append('variant[]', key)
}

现在，我如何制作多维图像数组的formData 主体？我做了这样的事情，感觉不对。

for (let i = 0; i < images.length; i++) {
  for (let j = 0; j < images[i].length; j++) {
    if (typeof images[i][j] !== 'object') continue
    formBody.append(`image_url[]${i}[]`, images[i][j])
  }
}

在formData中发送多维的正确方法是什么？

【问题讨论】：

标签： javascript arrays reactjs multipartform-data form-data

【解决方案1】：

我不知道您的图像是哪种格式，但假设它们都可以转换为 JSON。我建议您执行以下操作，因为它可以保持数组的嵌套完整，而不是散布它们（如果您直接传递参数，即数组，它会这样做）。

formData.append("images", JSON.stringify(imagesArray))

【讨论】：

我必须发送用户将上传的文件（blob），因此无法将它们转换为字符串。仅需要文件格式。
您可以尝试“react-file-base64”库，因为您正在使用 react。它会将您的文件转换为 base64 字符串，然后可以对其进行字符串化。它真的很容易使用。如果你在服务器端发生了一些只能接受“blob”的事情，那么你可能不得不寻找其他方法。

【解决方案2】：

因此，我没有发送多维数组，而是更改了端点的主体，对于每个变体，都有一个具有该变体 ID 的键。例如;

variant=[a,b]

而不是发送

images = [[File, File], [File, File, File]]

我现在正在制作一个动态键并将其附加到图像键，如下所示：

images_a[] = File
images_a[] = File
images_b[] = File
images_b[] = File
images_b[] = File

原来它是更简单的方法。

【讨论】：