【问题标题】：How can I post and array of JSON objects with each object "containing" an uploaded image?如何发布 JSON 对象数组和每个对象“包含”上传的图像？
【发布时间】：2015-04-20 15:50:33
【问题描述】：

我认为我的问题很容易通过简单地显示我想发布到服务器的 JSON 对象来解释。请注意，我不想convert the file to a bytearray。

var myObject = {
   Name: "Foo",
   YourImages: [
      {Title: "Bar", Image: (some image uploaded/attached via html file input)},
      {Title: "Fizz", Image: (some image uploaded/attached via html file input)},
      {Title: "Buzz", Image: (some image uploaded/attached via html file input)}
   ]
}

更新

我还没有编写上传到服务器的代码，但是this excellent "fileread" directive 允许我将图像分配给我的模型中的一个属性，这正是我所追求的。

【问题讨论】：

您单独上传图片，然后在您的对象中放置图片的路径。
你停止使用这样的自定义对象，而是使用 formData 对象来保存图像
@Styphon--谢谢，我已经考虑过了，可能不得不这样做，但希望避免多次 ajax 调用。
您可以在一个 ajax 请求中发送图像和文本以及其他任何内容，只要它作为 formData 对象发送！

标签： javascript angularjs post

【解决方案1】：

简短回答：您希望将数据作为多部分请求发布。请参阅this question and its accepted answer 了解更多信息。

既然你说你不想做一个字节数组，我想你通常不想对二进制文件进行 Base64 编码（这在带宽和处理时间上会很昂贵）。在这种情况下，最简单的解决方案是发送一个多部分请求，然后您的后端可以将其重新组合在一起。

【讨论】：

使用 Chrome REST 控制台发送请求的问题与在 javascript 中发送图像有什么关系？
答案讨论了 HTTP 多部分请求的基础知识，并包含指向 HTTP 规范的链接；我认为它很好地给出了需要做的事情的总体思路。我确信有一些库可以自动处理它，但我个人喜欢在寻找这些库之前知道在幕后需要做什么。

【解决方案2】：

在一个 ajax 请求中发送图像、文本和其他内容的正确方法是使用 formData

var myObject = new FormData();

formData.append("Name", "Foo");
formData.append("Titles", "Bar, Fizz, Buzz");
formData.append("Image1", fileInputElement.files[0]);
formData.append("Image2", fileInputElement.files[1]);

var request = new XMLHttpRequest();
request.open("POST", "http://url.com/script_to_handle.php");

request.send(formData);

【讨论】：

非常感谢，这很有道理；但是，我可以将对象数组附加到表单吗？
我不确定，您必须尝试一下。它确实接受二进制图像和 blob 作为 append 中的值，但不确定它还支持什么？
太棒了，也很公平，谢谢。我会试一试并报告。
请注意，这确实是使用 ajax 提交上传图像的唯一正确方法，在不支持 formData 的旧浏览器中，必须回退到 iframe 和其他在后台提交表单等垃圾。
@MatthewPatrickCashatt Blob 可用于将对象作为 JSON 发送。

【解决方案3】：

我们使用 ReactJS(front) 和 ASP.Net core(back) 来实现，所以最好的方法是使用 FormData，我们使用如下所示的对象，其中包含一个对象数组，每个对象都包含一个图像数组也是，

{
    CommodityID:xxxxx,
    TotalWeight:xxxx,
    CostOfCommodity:xxxx,
    Prerequisites:[{
        ProductId: xxxx,
        DeliveryWeight: xxxxx,
        ReleasedImagesUrl: [
            multiple images file
        ]
    },{
        ProductId: xxxx,
        DeliveryWeight: xxxxx,
        ReleasedImagesUrl: [
            multiple images file
        ]
    }]
}

实际上，我们像Prerequisites[0].DeliveryWeight 一样分别发送数组的每个项目，这就是重点。请注意在我们的例子中项目的第一个字符是大写的字母（这也很重要）

const formData = new FormData();
    formData.append("CommodityID", this.state.commodityId);
    formData.append("TotalWeight", this.state.totalWeight);
    formData.append("CostOfCommodity",this.state.costOfCommodity);
    for (let i = 0; i < this.state.prerequisitesListTemp.length; i++) {
      formData.append(
        `Prerequisites[${i}].ProductId`,
        this.state.prerequisitesListTemp[i].productId
      );
      formData.append(
        `Prerequisites[${i}].DeliveryWeight`,
        this.state.prerequisitesListTemp[i].deliveryWeight
      );

      for (
        let j = 0;j < this.state.prerequisitesListTemp[i].releasedImagesUrl.length;j++
      ) {
        formData.append(
          `Prerequisites[${i}].ReleasedImagesUrl`,
          this.state.prerequisitesListTemp[i].releasedImagesUrl[j]
        );
      }
    }

【讨论】：