Как реализовать New FormData () для данных массива из объекта, чтобы выполнить метод POST с использованием Ax ios, ReactJs? - PullRequest
Новая
       9

Как реализовать New FormData () для данных массива из объекта, чтобы выполнить метод POST с использованием Ax ios, ReactJs?

1 голос
/ 09 июля 2020

На бэкэнде я использую multer для загрузки нескольких файлов / изображений, я пробовал использовать Postman, и он работает. но когда я применяю его на интерфейсе, используя reactjs, я запутался

пример: 

state = {
  name: 'product1',
  price: '200',
  images: [{name: "1.png", lastModified: 1593401931873, lastModifiedDate: Mon Jun 29 2020 10:38:51 GMT+0700 (Waktu Indochina), webkitRelativePath: "", size: 176924},
            {name: "2.png", lastModified: 1593401931873, lastModifiedDate: Mon Jun 29 2020 10:38:51 GMT+0700 (Waktu Indochina), webkitRelativePath: "", size: 176924}],
  files: [{name: "1.zip", lastModified: 1593401931873, lastModifiedDate: Mon Jun 29 2020 10:38:51 GMT+0700 (Waktu Indochina), webkitRelativePath: "", size: 176924},
            {name: "2.zip", lastModified: 1593401931873, lastModifiedDate: Mon Jun 29 2020 10:38:51 GMT+0700 (Waktu Indochina), webkitRelativePath: "", size: 176924}],
          
}

handleSubmit = () => {
  const { name, price, images, files} = this.state

  const body = new FormData()
  body.append('name', name)
  body.append('price', price)

  images.map((file, i) =>  body.append('images[i]', file[i])) // not work
  files.map((file, i) =>  body.append('files[i]', file[i])) // not work

  axios.post(`http://localhost:3000/api/v1/add`, body)
  .then((res) => res.data.data)

  // result {"name":"roduct1","price":"200","images":[{},{}],"files":[{},{}]}
}

1 Ответ

0 голосов
/ 09 июля 2020

Вы можете выполнить POST-запрос через ax ios следующим образом: 

var bodyFormData = new FormData();
bodyFormData.set('userName', 'Fred');
bodyFormData.append('image', imageFile); 

axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    headers: {'Content-Type': 'multipart/form-data' }
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

Также много раз наблюдалось, что localhost не работает с ax ios. Вместо этого вам нужно использовать IP-адрес. Если предположить, что ваш IP-адрес 192.23.43.45, тогда URL-адрес станет http://192.23.43.45:3000/api/v1/add. Итак, вы можете попробовать этот подход

...