如何使用图像选择器将图像上传到服务器反应本机

Question

我要上传图片并上传到服务器。我如何获取文件并可以在服务器中读取？

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

这是我的 axios post

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);
        // need handling error
      });
  };

我得到了回应，也是错误的，但在开发网站上可以上传图片。谢谢

Answer 1

要上传图片到文件到网络服务器，我们不能在axios或fetch的数据属性中发送它。

要上传文件或图片，我们必须将数据转换为表单数据。然后我们可以借助axios或fetch将表单数据发送到web服务器。

例如：

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);
      // need handling error
    });
};

如何使用图像选择器将图像上传到服务器反应本机

How to upload image to server with image picker react native

file-upload

image

react-native