Установить параметр в FormData для динамических полей (Javascript)

Question

У меня возникает проблема с настройкой данных формы для включенных динамических полей input[type="file"].

На мой взгляд, динамические поля означают генерацию полей с циклом массива.

Я пробовал цикл for, чем данные не отправляются на сервер.

Я использую Vue и Vuex.

В базе данных идет только значение из последнего цикла.

let formdata = new FormData();
for(var i = 0; i< this.assignmentForm.length; i++) {
  formdata.append('file', this.$refs.assignmentFile[i].files[0]);
  formdata.append('name', this.$refs.assignmentName[i].value);
  formdata.append('comment', this.$refs.assignmentComment[i].value);
  formdata.append('assignment_solution', this.respondId);
}

Answer 1

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

У вас есть как минимум 2 варианта:

1. Дайте уникальные имена каждому полю.Нечто похожее на это

   formdata.append ('file' + i, this. $ Refs.assignmentFile [i] .files [0]);

Обратите внимание наконкатенация файла с индексной переменной.

Используйте обозначение массива для имен полей.Это совместимо с тем, как PHP обрабатывает переменные POST.

formdata.append ('file []', this. $ Refs.assignmentFile [i] .files [0]);

Обратите внимание на квадратные скобки в имени file [] .

Это необходимо сделать для всех полей: file, name, comments.

Answer 2

Вы правильно используете .append вместо .set, но вы забыли, что переменные должны быть массивами, поэтому их ключи должны быть file[], name[], comment[] и assignment_solution[] соответственно.

Таким образом ваш бэкэнд правильно распознает, что они действительно являются массивами.