javascript - How to upload Base64 data to a server using formdata React native? - Stack Overflow

admin管理员组

文章数量:1022688

I have an image in Base64 format. I want to send it to the API using formdata. How can that be achieved? I am using React native signature canvas to get the Base64 of the signature.

let signature = base64signature;
const formdata = new FormData();
formdata.append('attachments', {
  uri: signature,
  name: 'logo',
  filename: 'logo',
  type: 'image/png',
});

I followed this link as well but don't understand how to send it to the API as formdata. It's constantly giving network errors.

I have also tried to convert it to a blob and send but that didn't work either. Can anyone help me with this?

I have an image in Base64 format. I want to send it to the API using formdata. How can that be achieved? I am using React native signature canvas to get the Base64 of the signature.

let signature = base64signature;
const formdata = new FormData();
formdata.append('attachments', {
  uri: signature,
  name: 'logo',
  filename: 'logo',
  type: 'image/png',
});

I followed this link as well but don't understand how to send it to the API as formdata. It's constantly giving network errors.

I have also tried to convert it to a blob and send but that didn't work either. Can anyone help me with this?

• javascript
• react-native
• es6-promise
• multipartform-data

Share Improve this question Follow edited Sep 14, 2023 at 14:00 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 23, 2022 at 18:10 YusYus 18411 gold badge77 silver badges1717 bronze badges 4

• Could you add the code that you tried? – MaartenDev Commented Jan 23, 2022 at 18:12
• I have added the code above. – Yus Commented Jan 23, 2022 at 18:19
• No, the code that transforms the base64-encoded string to a File object. Please also include the error message(s) in your question – Phil Commented Jan 24, 2022 at 5:55
• The object you're appending to your formData isn't any of the acceptable parameter types. It must be be "a USVString or Blob (including subclasses such as File)" – Phil Commented Jan 24, 2022 at 5:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

var imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA..." //your bse64 image

onSubmit(){
const file = DataURIToBlob(imgBase64)
const formData = new FormData();
formData.append('upload', file, 'image.jpg') 
formData.append('profile_id', this.profile_id) //other param
formData.append('path', 'temp/') //other param
}

    function DataURIToBlob(dataURI: string) {
        const splitDataURI = dataURI.split(',')
        const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
        const mimeString = splitDataURI[0].split(':')[1].split(';')[0]

        const ia = new Uint8Array(byteString.length)
        for (let i = 0; i < byteString.length; i++)
            ia[i] = byteString.charCodeAt(i)

        return new Blob([ia], { type: mimeString })
      }

The easiest way without external libraries.

let signature = base64signature;

const formdata = new FormData();

formdata.append('attachments', {
  uri: signature, // base64
  name: 'logo.png',
  type: 'image/png',
});

await axios.post('/', formdata, {headers: {'Content-Type': 'multipart/form-data'}})

1. You need to install react-native-fs

import RNFS from 'react-native-fs';
import {Platform} from 'react-native';

  const createTempImage = async base64String => {
    try {

      let base64 = base64String.replace('data:image/png;base64,', '');
      const fileName = `${Date.now()}.png`;
      
      const path = `${RNFS.TemporaryDirectoryPath}/${fileName}`;
      await RNFS.writeFile(path, base64, 'base64');
      
      const image = {
        uri: Platform.OS == 'ios'? path: 'file://' + path,
        name: fileName,
        type: 'image/png',
      };

     return image
    } catch (error) {
      console.log(error);
    }
  };

I have an image in Base64 format. I want to send it to the API using formdata. How can that be achieved? I am using React native signature canvas to get the Base64 of the signature.

let signature = base64signature;
const formdata = new FormData();
formdata.append('attachments', {
  uri: signature,
  name: 'logo',
  filename: 'logo',
  type: 'image/png',
});

I followed this link as well but don't understand how to send it to the API as formdata. It's constantly giving network errors.

I have also tried to convert it to a blob and send but that didn't work either. Can anyone help me with this?

I have an image in Base64 format. I want to send it to the API using formdata. How can that be achieved? I am using React native signature canvas to get the Base64 of the signature.

let signature = base64signature;
const formdata = new FormData();
formdata.append('attachments', {
  uri: signature,
  name: 'logo',
  filename: 'logo',
  type: 'image/png',
});

I followed this link as well but don't understand how to send it to the API as formdata. It's constantly giving network errors.

I have also tried to convert it to a blob and send but that didn't work either. Can anyone help me with this?

• javascript
• react-native
• es6-promise
• multipartform-data

Share Improve this question Follow edited Sep 14, 2023 at 14:00 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 23, 2022 at 18:10 YusYus 18411 gold badge77 silver badges1717 bronze badges 4

• Could you add the code that you tried? – MaartenDev Commented Jan 23, 2022 at 18:12
• I have added the code above. – Yus Commented Jan 23, 2022 at 18:19
• No, the code that transforms the base64-encoded string to a File object. Please also include the error message(s) in your question – Phil Commented Jan 24, 2022 at 5:55
• The object you're appending to your formData isn't any of the acceptable parameter types. It must be be "a USVString or Blob (including subclasses such as File)" – Phil Commented Jan 24, 2022 at 5:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

var imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA..." //your bse64 image

onSubmit(){
const file = DataURIToBlob(imgBase64)
const formData = new FormData();
formData.append('upload', file, 'image.jpg') 
formData.append('profile_id', this.profile_id) //other param
formData.append('path', 'temp/') //other param
}

    function DataURIToBlob(dataURI: string) {
        const splitDataURI = dataURI.split(',')
        const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
        const mimeString = splitDataURI[0].split(':')[1].split(';')[0]

        const ia = new Uint8Array(byteString.length)
        for (let i = 0; i < byteString.length; i++)
            ia[i] = byteString.charCodeAt(i)

        return new Blob([ia], { type: mimeString })
      }

The easiest way without external libraries.

let signature = base64signature;

const formdata = new FormData();

formdata.append('attachments', {
  uri: signature, // base64
  name: 'logo.png',
  type: 'image/png',
});

await axios.post('/', formdata, {headers: {'Content-Type': 'multipart/form-data'}})

1. You need to install react-native-fs

import RNFS from 'react-native-fs';
import {Platform} from 'react-native';

  const createTempImage = async base64String => {
    try {

      let base64 = base64String.replace('data:image/png;base64,', '');
      const fileName = `${Date.now()}.png`;
      
      const path = `${RNFS.TemporaryDirectoryPath}/${fileName}`;
      await RNFS.writeFile(path, base64, 'base64');
      
      const image = {
        uri: Platform.OS == 'ios'? path: 'file://' + path,
        name: fileName,
        type: 'image/png',
      };

     return image
    } catch (error) {
      console.log(error);
    }
  };

本文标签： javascriptHow to upload Base64 data to a server using formdata React nativeStack Overflow