javascript - How To Upload Image from React-Native-Image-Picker with axios? - Stack Overflow

admin管理员组

文章数量:1431037

I'm trying to upload an image from my app to API, but it didn't responded by the server, but another data which is text is sent successfully, can anyone help me?

Response from the image picker

{"fileName": "rn_image_picker_lib_temp_62670a6c-c6a8-47a6-ae8f-2696455d141b.jpg", "fileSize": 82214, "height": 800, "type": "image/jpeg", "uri": "content://.talikasih.imagepickerprovider/cacheDir/rn_image_picker_lib_temp_62670a6c-c6a8-47a6-ae8f-2696455d141b.jpg", "width": 379}

and this is the data

const datas = new FormData();
datas.append('images', payload.image)

Here is the axios

axios({
      method: 'POST',
      url: API_NO_PARAM_CONFIG.createCampaign,
      headers: {
        Authorization: `Bearer ${e}`,
      },
      data: {
        datas,
      },
    })

I'm trying to upload an image from my app to API, but it didn't responded by the server, but another data which is text is sent successfully, can anyone help me?

Response from the image picker

{"fileName": "rn_image_picker_lib_temp_62670a6c-c6a8-47a6-ae8f-2696455d141b.jpg", "fileSize": 82214, "height": 800, "type": "image/jpeg", "uri": "content://.talikasih.imagepickerprovider/cacheDir/rn_image_picker_lib_temp_62670a6c-c6a8-47a6-ae8f-2696455d141b.jpg", "width": 379}

and this is the data

const datas = new FormData();
datas.append('images', payload.image)

Here is the axios

axios({
      method: 'POST',
      url: API_NO_PARAM_CONFIG.createCampaign,
      headers: {
        Authorization: `Bearer ${e}`,
      },
      data: {
        datas,
      },
    })

• javascript
• react-native
• axios

Share Improve this question Follow edited Jan 22, 2021 at 9:32 Ali Esmailpor 1,20133 gold badges1212 silver badges2323 bronze badges asked Jan 22, 2021 at 3:38 amerwamerw 42755 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here is the solution. First save the selected image in one of your state variable. For example create a state variable called "selectedImage" as below:

const [selectedImage, setSelectedImage] = useState(null);

Now, when you select image set selected image in your state variable like this:

    ImagePicker.launchImageLibrary(options, (response) => {
      if (response.uri) {
        setSelectedImage(response);
      }
    });

Now create FormData as below:

  const datas = new FormData();

  datas.append('images', {
    name: selectedImage.fileName,
    type: selectedImage.type,
    uri:
      Platform.OS === 'android' ? selectedImage.uri : selectedImage.uri.replace('file://', ''),
  });

And pass as below :

axios({
  method: "POST",
  url: API_NO_PARAM_CONFIG.createCampaign,
  headers: {
    Authorization: `Bearer ${e}`,
    "Content-Type": "multipart/form-data", // add this
  },
  datas, //pass datas directly
});

本文标签： javascriptHow To Upload Image from ReactNativeImagePicker with axiosStack Overflow