如何使用 formdata react native 将 base64 上传到服务器答案

【问题标题】：how to upload base64 to server using formdata react native如何使用 formdata react native 将 base64 上传到服务器
【发布时间】：2023-02-13 11:19:46
【问题描述】：

我有一张图片的 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',
});

How to convert Base64 String to javascript file object like as from file input form?
我也点击了此链接，但不明白如何将其作为表单数据发送到 api。它不断出现网络错误。

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

【问题讨论】：

您可以添加您尝试过的代码吗？
我已经添加了上面的代码。
不，将 base64 编码的字符串转换为 File 对象的代码。还请在您的问题中包含错误消息
您附加到 formData 的对象不是 acceptable parameter types 中的任何一个。一定是“USVString或Blob（包括子类，例如File）”

标签： javascript react-native api es6-promise multipartform-data

【解决方案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 })
      }

【讨论】：

【解决方案2】：

你需要安装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);
    }
  };

【讨论】：