如何使用formdata React Native将base64上传到服务器

Question

我有一个图像的base64..我想使用formdata将它发送到api。如何才能做到这一点？我正在使用 React Native 签名画布来获取签名的 Base64。

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

如何将 Base64 字符串转换为 javascript 文件对象，就像文件输入表单中的那样？
我也点击了这个链接，但不明白如何将它作为表单数据发送到 api..它不断地给出网络错误。

我也尝试将其转换为 blob 并发送，但效果不佳。谁能帮我解决这个问题吗？

Answer 1

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 })
      }

Answer 2

1. 您需要安装

   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);
    }
  };

Answer 3

无需外部库的最简单方法。

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'}})