Send Image as Raw data Axios React Native-CodePudding

My backend accepts raw images & binary for the image upload (works in Postman), but on the React Native frontend I am using react-native-image-crop-picker to just get a uri for the image and so on.

I need to be able to send the image as its raw or binary form, rather than embed it in FormData.

I am using Axios for my requests.

How can I accomplish this?

CodePudding user response：

With uri returned by react-native-image-crop-picker. Fetch image raw data (BLOB) as

const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.onerror = function (e) {
      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", [IMG_URI_HERE], true);
    xhr.send(null);
  });

//  Your logic to upload BLOB  data to the server

  // We're done with the blob, close and release it
  blob.close();

CodePudding user response：

According to react-native-image-crop-picker you can get the base64-encoded string by setting includeBase64 to true in the request object.

includeBase64 -- bool (default false) -- When set to true, the image file content will be available as a base64-encoded string in the data property. Hint: To use this string as an image source, use it like: <Image source={{uri: data:${image.mime};base64,${image.data}}} />

ImagePicker.openCamera({
  width: 300,
  height: 400,
  cropping: true,
  includeBase64: true
}).then(image => {
  console.log(image.data);
});

CodePudding user response：

You can use following code with react-native-image-crop-picker library and axios library.

ImagePicker.openPicker({
      compressImageMaxWidth: 300,
      compressImageMaxHeight: 300,
      mediaType: 'photo',
      cropping: true,
    })
      .then(({ path, mime }) => {
        if (path) {
          const file = {
            uri: path,
            name: path,
            type: mime,
          };
          const body = new FormData();
          body.append('file', file);
          uploadImage(body);
        }
      })
      .catch((e) => {
        console.log(e.message);
      });

where uploadImage has following implementation

const uploadImage = (data) => {
  const payload = {
    baseURL: AppConfig.BASE_URL,
    url: '/image',
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    timeout: 120000,
    data,
  }
  axios(payload);
}