Como fazer upload de imagens para o servidor usando image picker no React Native?

Desenvolvimento de Aplicativos
#1

Eu quero fazer upload de imagem e upload para o servidor usando image picker no React Native. Como posso obter um arquivo e pode ler no servidor?

const takePhotoFromLibraryProfile = () => {
    ImagePicker.openPicker({
      width: 200,
      height: 200,
      cropping: true,
    }).then(image => {
      setImageProfile(image.path);
    });
  };

Meu post axios

axios({
      crossDomain: true,
      method: 'post',
      url: 'url',
      data: {
        userId: dataProfile.id,
        pictures: imageProfile,
      },
      validateStatus: false,
    })
      .then((response, status) => {
        console.log(response);
        setSuccessModal(response.status);
      })
      .catch(function (error) {
        console.log(error);
      });
  };

Com esse código eu não tô conseguindo fazer o upload da imagem. Alguém pode me ajudar?

#2

Para fazer upload de imagens para arquivos em servidores web, não podemos enviá-lo na propriedade data do Axios ou fetch.

Para fazer upload de arquivos ou imagem, temos que converter os dados em dados de formulário. E então podemos enviar os dados do formulário para o servidor web com a ajuda do Axios ou fetch.

Por exemplo:

const formData = new FormData()
formData.append('userId', dataProfile.id)
formData.append('pictures', {
    uri: user.profilePicture,
    type: 'image/jpeg',
    name: 'photo.jpg'
})

axios({
    method: 'post',
    url: 'url',
    data: formData,
  })
    .then((response, status) => {
      console.log(response);
      setSuccessModal(response.status);
    })
    .catch(function (error) {
      console.log(error);
    });
};
1 curtida