Как отправить файл через React-приложение и корректно его обработать в API написаном на laravel?

Question

[Sergey Filnor]

Добрый день.
Собственно вопрос уже описан в заголовке. Столкнулись с проблемой, что не можем передать файл из реакта в наше API. Ловим то 422 ошибку, то 401...

В реакте в компоненте собираем данные с формы - передаем их в екшн и там собираем как обьект FormData.

let ProductFormData = new FormData();
      for( let item in data){
        ProductFormData.set( item, data[item]);
      }

      axios.post(
        `${baseUrl}/api/products`,
        {
          ProductFormData
        },
        {
          headers: {
            'Accept': 'application/json',
            'Content-type': 'multipart/form-data',
            'Authorization': `Bearer ${token}`,
          },
          contentType:false,
      	  cache: false,
      	  processData:false,
        }
      )

И после этого на беке обьект просто не проходит валидацию - пишет что пустой, хотя с клиента все поля уходят. Я спокойно получаю их через formData.entries() перебирая итератор и все поля, включая файлы там присутствуют.

При этом в консоли, в вкладке нетворк запрос тоже пустой:


Что я делаю не так? Есть какая-то специфика, как правильно нужно это обрабатывать во фронте что бы оно коректно отправилось?
Или же нужно просто правильно запрос считать на бэкенде?

Comments

[Роман Александрович]

а код метода сервера который принимает можно?

[Роман Александрович]

let formData = new FormData()

getState().photoReport.photos.map((el, ind) => {
				formData.append("files", {
					uri: el.uri,
					type: "image/jpeg",
					filename: el.uri.replace(/^.*[\\\/]/, ""),
					name: el.uri.replace(/^.*[\\\/]/, ""),
				})
		  })
axios.post(`${API_ROOT}/api/Tasks/PhotoReport`,
					formData,
					{
						headers: {
							Accept: "application/json",
							"Content-Type": "multipart/form-data",
							Authorization: "Bearer " + getState().auth.token,
						},
					}
				)

у меня formData не как у вас обьект

[Sergey Filnor]

Роман Александрович, в чем принципиальное отличие?
Методы append и set взаимозаменяемы, один позволяет добавлять несколько одинаковых ключей, а второй их просто перезаписывает.
Я пробовал отправлять как:

axios.post(
        `${baseUrl}/api/products`,
        {
          ProductFormData
        },
        { ... });

Так и вот так:

axios.post(
        `${baseUrl}/api/products`,
          ProductFormData,
        { ... });

А поля

contentType:false,
cache: false,
processData:false,

Это уже отчаяный способ, найти способ как эти данные передать. У вас, кстати, в консоли в нетворке когда посмотреть запрос показывает данные из formData? Или это нормально когда их не показывает?

[Роман Александрович]

Sergey Filnor, у меня все показывало. мне б глянуть на метод в бэкенде. Думаю пролило б свет на данный вопрос

[Роман Александрович]

Sergey Filnor, я б на вашем месте все же использовал append тк он у меня работает и после емтода посмотрел бы есть данные в обьекте formData или нет а затем уже смотрел на консоль в нетворке. Логично ведь если не сработал set или append то и обьект пустой будет оправлять. А если обьект после манипуляций не пустой значит проблема в axiose и на крайний случай можне сделать запрос используя fetch

[Роман Александрович]

Sergey Filnor, либо выложите ваш проект куда нибудь (https://codesandbox.io/s/jv84k8yr19)