Question

我目前正在更改React项目中的表单，以允许与表单一起上传文件。当前，ajax帖子看起来类似于以下内容：

return axios.post(url, {
      item: {
        prop: 'test',
        otherProp: 'test2'
        arrayOfObjects: [
          {
            prop: 'test'
          },
          {
            prop: 'test'
          },
        ]
      }
    });

现在的问题是，我需要发送多张要与其他表格数据一起上传的图片。

我见过的一切都说要使用FormData，但是问题是我有很多嵌套的数组和对象文字，这使得使用FormData相当复杂。

无论如何，我是否可以提交多个文件以及JSON数据而不会增加很多复杂性？

如果要使事情变得更容易，我也正在使用Rails后端。

更新：

我已经创建了一种将JSON对象转换为FormData对象的方法。乍一看，它似乎可以正常工作，但是我敢肯定，我必须做进一步的测试。我认为这是我最好的解决方案，除非有人能想到其他任何事情。

convertToFormData(formData, key, data) {
    if (moment.isMoment(data)) {
      this.convertToFormData(formData, key, data.toString());
    }
    else if (data instanceof File) {
      formData.append(key, data, data.name);
    }
    else if (data instanceof Array) {
      for (let i = 0; i < data.length; i++) {
        this.convertToFormData(formData, `${key}[${i}]`, data[i]);
      }
    }
    else if (data instanceof Object) {
      for (let prop in data ) {
        this.convertToFormData(formData, `${key}[${prop}]`, data[prop]);
      }
    }
    else {
      formData.append(key, data);
    }
  }

Answer 1

我已经通过创建一种将json数据转换为FormData对象的方法来解决了这个问题。

function convertToFormData(data) {
  var fd = new FormData();
  convertToFormDataRecursive(fd, '', data);
  return fd;
}

function convertToFormDataRecursive(formData, key, data) {
  if (moment.isMoment(data)) {
    convertToFormData(formData, key, data.toString());
  }
  else if (data instanceof File) {
    formData.append(key, data, data.name);
  }
  else if (data instanceof Array) {
    for (let i = 0; i < data.length; i++) {
      convertToFormDataRecursive(formData, key + '[' + i + ']', data[i]);
    }
  }
  else if (data instanceof Object) {
    for (let prop in data ) {
      var newKey = (key != '') ? key + '[' + prop + ']' : prop;
      convertToFormDataRecursive(formData, newKey, data[prop]);
    }
  }
  else {
    formData.append(key, data);
  }
}

如何将ajax POST json数据与文件一起使用？

1 个答案: