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

Question

我目前正在更改 React 项目中的表单，以允许随表单上传文件。 目前，ajax 帖子如下所示：

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

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

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

无论如何，我可以在不增加大量复杂性的情况下提交多个文件和我的 JSON 数据吗？

如果我可以在这端做任何事情来让事情变得更容易，我也会使用 Rails 后端。

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);
  }
}