Блог

Я пытаюсь загрузить файл с помощью FormData, но сервер не получает данные.

После ряда сообщений и блогов, которые завершают настройку заголовка типа содержимого, поскольку multipart / form-data переопределяет требуемый формат, включающий «границу», я удалил заголовок типа содержимого, предполагая, что мой браузер будет обрабатывать заголовок типа содержимого запроса. Интернет переполнен этим решением для formdata, но я не смог найти ни одного случая, когда браузер автоматически не устанавливает тип содержимого при использовании FormData. Мой сервер работает нормально, потому что я могу успешно отправлять запросы от REST-клиента.

Это мой вызов API :

 const data = new FormData()
data.append('file', this.state.selectedFile)

const result = await fetch("http://localhost:3000/uploadResume", {
            method: "POST",
            headers: {
                "Authorization": `Bearer ${localStorage.getItem('user_token')}`
            },
            data: data
        })
  

Это заголовки запроса, установленные браузером (Google Chrome) :

Есть ли параметр браузера, который мне не хватает, или другая потенциальная проблема, которую я упускаю из виду?

РЕШАЕМАЯ я вызвал API с набором данных как «данные» вместо «тела» по ошибке.

объект запроса ожидает body свойство

     fetch(url, {
        // data: data <-- wrong
        body: data // <-- correct
    })
  

Не по теме

судя по небольшому объему данных, которые вы отправляете (всего одно поле / файл), вы могли бы просто опубликовать данные в виде необработанных байтов вместо того, чтобы они были FormData (что немного облегчает серверу передачу данных в файл и не требует обработки какого-либо алгоритма FormData) вы бы заранее знали, насколько велик файл при его получении.

     fetch(url, {
        body: this.state.selectedFile
    })
  

в общем, вы теряете имя файла, но, возможно, вы можете просто вставить его в какой-нибудь заголовок x-filename