Формданные в бэкэнде пустые

Question

Я передаю данные изображения, добавляя их с помощью formdata вactjs

. Это обработчик для этого

handleUserImage(e) {
    const input = e.target
    if (input.files && input.files[0]) {
      const reader = new FileReader()
      reader.onload = (r) => {
        const formdata = new FormData()
        formdata.append('photos', input.files[0])
        formdata.append('fileName', input.files[0].name)
        this.props.uploadImage({ image: formdata })
      }
      reader.readAsDataURL(input.files[0])
    }
  }

, и когда я его консалюю, для бэкэнда он выглядит как пустой объект

{ image: {} } 

Тогда, как я могу передать formdata и загрузить изображение

Редактировать : Загрузить изображение API вызова

export const uploadImage = (data) => {
  console.log(data)
  return fetch(`http://hostName:3001/town/image`, {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    body: data
  })
  .then((res) => {
    return res.json()
  })
  .then((payload) => {
    console.log(payload)
    return payload
  }).catch((error) => {
   throw error
  })
}

Answer 1

Зачем использовать FileReader, загружать его как base64 и добавлять имя файла отдельно?

Вы можете просто сделать

handleUserImage (evt) {
  const file = evt.target.files[0]
  if (file) {
    const formdata = new FormData()
    formdata.append('photos', file)
    this.props.uploadImage({ image: formdata })
  }
}

• Вы экономите несколько байтов,
• избежать ненужного декодирования и кодирования вычислений
• работает быстрее
• экономит ~ 3x пропускной способности

---

FormData.append (имя, значение, имя файла)

name
Имя поля, данные которого содержатся в значении.

value
Значение поля,Это может быть USVString или Blob (включая подклассы, такие как File).

filename Необязательно
Имя файла, сообщаемое серверу (USVString), когда передается Blob или Fileкак второй параметр.Имя файла по умолчанию для объектов Blob - «blob».Имя файла по умолчанию для объектов File - это имя файла.

- MDN - FormData.append ()

Answer 2

когда я поддерживаю его для бэкэнда, он выглядит как пустой объект

Это нормально.

 headers: {
       'Content-Type': 'multipart/form-data'
 },

Составные данные формы MIME-типы должны иметь параметр для описания маркера границы (чтобы синтаксические анализаторы знали, где заканчивается одно поле и начинается следующее).

У вас его нет.Более того, у вас нет возможности узнать, что это будет.

Не переопределяйте заголовок Content-Type, разрешите fetch сгенерировать его из FormDataобъект.Удалите код, который я полностью цитировал.