Как ajax POST JSON данные вместе с файлами? - PullRequest
Новая
       27

Как ajax POST JSON данные вместе с файлами?

0 голосов
/ 15 февраля 2019

В настоящее время я изменяю форму в проекте React, чтобы разрешить загрузку файлов вместе с формой.В настоящее время сообщение ajax выглядит примерно так: 

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

Теперь проблема в том, что мне нужно отправить несколько изображений для загрузки вместе с другими данными формы.

Все, что я виделговорит, что нужно использовать FormData, но проблема в том, что у меня много вложенных массивов и литералов объектов, что делает использование FormData довольно сложным.увеличение сложности на тонну?

Я также использую рельсовый бэкэнд, если есть что-то, что я могу сделать с этой целью, чтобы упростить процесс.

Обновление:

I 'Мы создали метод для преобразования моего объекта 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);
    }
  }
...