将对象数组转换为表单数据答案

【问题标题】：Convert object array to formdata将对象数组转换为表单数据
【发布时间】：2020-07-30 06:25:33
【问题描述】：

我想在 Angular 中将 Object Array 转换为 Formdata。我的对象数组也可以包含任何键值对和图像。

然后我必须通过 POST API 将这个表单数据发送到后端（Express）。

[{uid: "", image: File, description: "store", price: "800"}
 {uid: "f9b37f48-cff0-44f1-aa9f-fb9766bde90b", description: "wooden sandals", price: "100"}
 {uid: "dd5adebf-06c6-4d6c-b005-2fcb0a2ca161", description: "blanket", image: File}]

我尝试了很多选择，但都能够做到这一点。

如何进行这种转换？

或者，如果我可以直接将此对象数组发送到来自 Angular 的 POST 调用？

编辑 1： image: File 是一个文件对象：

并上传图片：

onUploadImage(imageInput: HTMLInputElement, i, id: string) {
    if(imageInput.files && imageInput.files[0]) {
      this.image = imageInput.files[0]
      if(this.collections[i]['image'] === "" || typeof this.collections[i]['image'] === 'string') this.collections[i]['image'] = this.image
      let result = this.collectionsToAdd.some(item => item['uid'] === id)
      if(result) {
        const index = this.collectionsToAdd.indexOf(this.collectionsToAdd.find(item => item.uid === id))
        this.collectionsToAdd[index]['image'] = this.image
      }
      else {
        const obj = {
          uid: id,
          image: null
        }
        obj.uid = id
        obj.image = this.image
        this.collectionsToAdd.push(obj)
      }

      this.reader.readAsDataURL(imageInput.files[0])
      this.reader.onload = (event) => {
        this.collections[i]['imagePath'] = event.target.result
      }
    }
  }

提前致谢！

【问题讨论】：

image: File 似乎很可疑
@MaximeHelen 这是我通过前端上传的图像。这将作为文件发送到后端，以便将其存储在 S3 中
好吧，如果你使用 Express.js 或 php 或任何你将它解析回数组的东西，你可以 JSON.stringify(array) 和后端
你想如何从前端发送数据，完全取决于 express api 如何期望和处理数据？将对象转换为表单数据检查此stackoverflow.com/questions/22783108/…
@Ifaruki 我已经尝试过了，但它使图像在后端成为一个空对象。

标签： javascript arrays angular typescript object

【解决方案1】：

我认为最简单的方法是使用多个 HTTP 请求，这是简单的代码

// your array object
let preBody = [{uid: "", image: File, description: "store", price: "800"},
  {uid: "f9b37f48-cff0-44f1-aa9f-fb9766bde90b", description: "wooden sandals", price: "100"},
  {uid: "dd5adebf-06c6-4d6c-b005-2fcb0a2ca161", description: "blanket", image: File}];

// take a array of form data
let formDataArray: FormData[] = [];

// append each object key - value in formDataArray
preBody.forEach((object, index)=>{
  formDataArray.push(new FormData());
  Object.keys(object).forEach((key)=>{
    formDataArray[index].append(key, object[key]);
  });
});

// send request for each formData
formDataArray.forEach((formData)=>{
  this.http.post('http://localhost/test/text.php', formData).subscribe();
});

注意：您的数组对象不应包含任何对象或数组。

希望对你有帮助

【讨论】：

【解决方案2】：

你可以试试这个。这里的数据是你的数组。

const formData = new FormData();

for(let i = 0; i < data.length; i += 1) {
    Object.keys(data[i]).forEach((key: string) => {
        if(key === 'image') {
            formData.append(key, JSON.stringify(data[i][key]))
         } else {
             formData.append(key, data[i][key])
         }
    })
}

【讨论】：

这给了我后端的空白图像对象
标题中的数据是否正确？检查 post call 中的请求标头。如果没问题，那么在您处理请求的地方分享您的后端代码。
好的。所以我检查了标题，它正在发送image: {}
所以它没有从前端发送数据，你能提供你在发布请求中设置的标题吗？
它在标题中发送Content-type:multipart/form-data