How to send image from image Uri through HTTP request? (React Native and Django Backend)

Another option is to convert your image to base64 and send the string. Downsize is that usually the base64 strings has a bigger size than the image itself.

Something like this:

function readImage(url, callback) {   
    var request = new XMLHttpRequest();
    request.onload = function() {
       var file = new FileReader();
       file.onloadend = function() {
          callback(file.result);
       }
       file.readAsDataURL(request.response);
    };   
    request.open('GET', url);   
    request.responseType = 'blob';              
    request.send(); 
}

It has to be a local URI, there's no issues with that, how else are you going to point to the image.

Now to upload the image you should first wrap it inside of FormData:

// add this just above the axios request
let img = new FormData();
img.append('file', { uri: imageUri });

Then inside of your axios request body add:

image: img,

EDIT: This question in it's current form is unanswerable.

I'm using the same Expo’s image picker with React-native in one of my projects as OP and everything works just fine, there's no issues with FormData.

After having talked with OP in a stackoverflow chat, couple of days ago, and stripping the request down to just an image, the server started throwing encoding errors:

UnicodeDecodeError: 'utf-8' codec can't decode byte 0xff in position 168: invalid start byte

So the issue is with OP's Django backend not being setup correctly in parsing the image, and not with the sending of the image itself - which makes the question unanswerable.

you cant use react-native-fetch-blob .....

import RNFetchBlob from " react-native-fetch-blob"
  PostRequest(PATH){
      RNFetchBlob.fetch('POST', "[URL]", {

            "x-session-id": "SESSION_ID", //or Custom headers
            'Content-Type': 'multipart/form-data',

        }, [

                { name: 'image', filename: 'vid.jpeg', data: RNFetchBlob.wrap(PATH) },
                // custom content type

            ]).then((res) => {
                console.log(res)

            })
            .catch((err) => {
                console.log(err)
                // error handling ..
            })
        }
  }

for reference react-native-fetch-blob