1.图片插件生成base64
生成base64，可以通过一些插件会给你生成，自己需要生成的话可以使用 ReaderFile的readAsDataURL()来转换
var reader = new FileReader();
reader.readAsDataURL(inpFile.files[0]);
reader.onload = function () {
baseData = reader.result;
console.log("🚀 ~ file: 图片:", baseData); //获取到base64格式图片
2.base64转换file
base64转换有多种方法，就不一一列出，直接上代码
import { Base64 } from 'js-base64'
* 将base64转换为文件
* @param dataurl base64编码
* @param filename file name
* @returns
export const dataURLtoFile = (base64Str: any, fileName: any) => {
const arr = base64Str.split(',')
const mime = arr[0].match(/:(.*?);/)[1] // base64解析出来的图片类型
const bstr = Base64.dencode(arr[1]) // 对base64串进行操作，去掉url头，并转换为byte atob为window内置方法
let len = bstr.length
const ab = new ArrayBuffer(len) // 将ASCII码小于0的转换为大于0
const u8arr = new Uint8Array(ab) //
while (len--) {
u8arr[len] = bstr.charCodeAt(len)
// 创建新的 File 对象实例[utf-8内容，文件名称或者路径，[可选参数，type：文件中的内容mime类型]]
return new File([u8arr], fileName, {
type: mime,
上面代码需要注意：针对base64解码，可以使用 atob() 方法来进行解码，但这是window方法，在react-native不起作用。可以使用 js-base64 插件来代替。
3.上传文件
上传接口根据自己接口来判断
// result 是小编当前使用的签名插件 react-native-signature-capture
// 会返回参数 {encoded: base64编码, pathName: 文件路径}
_onSaveEvent = async (result: any) => {
const fd = new FormData()
// base64转换file
const file = dataURLtoFile(
`data:image/png;base64,${result.encoded}`,
`signature_${Date.now()}.png`,
fd.append('file', file)
// 调用接口
const dataFileUrl = await this.props.handleFileUrl(fd)
const tokenUrl = await this.props.addSasTokenOnUrl(dataFileUrl.url)
console.log('🚀 ~ 上传文件 === ', dataFileUrl)
console.log('🚀 ~ 下载文件 === ', tokenUrl)
4.上传报错
这个报错真的让我这个菜鸟头晕，但我经过三天三夜的战斗才发现一点问题，一点！！
在web使用new File()生成新的文件类型打印输出是没问题，但是在react-native输出出来的是类似于object的类型，所以导致文件上传缺失，不成功
解决方法：
生成新的文件类型并添加
// result 是小编当前使用的签名插件 react-native-signature-capture
// 会返回参数 {encoded: base64编码, pathName: 文件路径}
_onSaveEvent = async (result: any) => {
// 文件类型
const file = {
uri: result.pathName,
type: 'multipart/form-data',
name: `signature_${Date.now()}.png`,
const fd = new FormData()
// base64转换file
// const file = dataURLtoFile(
// `data:image/png;base64,${result.encoded}`,
// `signature_${Date.now()}.png`,
fd.append('file', file)
// 调用接口
const dataFileUrl = await this.props.handleFileUrl(fd)
const tokenUrl = await this.props.addSasTokenOnUrl(dataFileUrl.url)
console.log('🚀 ~ 上传文件 === ', dataFileUrl)
console.log('🚀 ~ 下载文件 === ', tokenUrl)
推荐使用：react-native-fileupload - 轻松实现原生文件上传
项目地址:https://gitcode.com/PhilippKrone/react-native-fileupload
在移动应用开发中，文件上传功能是不可或缺的。今天，我们向您推荐一款强大的开源库——react-native-fileupload，它为React Native开发者提供了简单易用的接口，轻松实...
React Native 文件上传组件教程
react-native-file-uploadA plugin for file upload on react-native项目地址:https://gitcode.com/gh_mirrors/re/react-native-file-upload 项目介绍
react-native-file-upload 是一个用于 React Native ...
选了文件就要上传，这篇就记录一下文件上传
这是antd的一个UI库，不知道的同学自行去学习，选择图片和拍照有时间在补上，他们的上传方法是同一个，还包含了一点点RN和webview的交互以及组件封装调用
https://rn.mobile.an...
折腾了一段时间，发现在strapi上传文件是出名的困难，而且官方文档上传文件教程也没有针对react native的部分，仅仅通过它的nodejs和browser代码在rn中套用行不通，其中还有些细节的纰漏。开始前请确保自己已经按照官方教程安装好strapi提示：以下是本篇文章正文内容，下面案例可供参考。
最近项目中使用到了图片上传功能，作为前端开发对此应该不陌生，正常来说图片会有一个单独存储的服务，例如现在公司使用minio统一集中管理，直接部署在docker上面非常方便，下面记录一下使用经历过的图片上传
1.base64直接上传
这种base64直接上传给后端，然后后端拿到数据之后就能自行处理，一般前端会对base64数据前面拼接"data:image/jpeg;base64," + base64数据；代表图片格式，其余后端自行处理，相对来说这种方式对前端更加友好，上传方式跟普通数据上传...
React Native has a binaryToBase64 util that accepts ArrayBuffer for base64 conversions:
var utf8 = require(‘utf8’);
var binaryToBase64 = require(‘binaryToBase64’);
var text = ‘foo © bar ???? baz’;
var bytes = utf8.encode(text);
var encoded = binaryToBas
react-native bundle --entry-file index.js --bundle-output ./out/xxxxxx.jsbundle --platform ios --assets-dest ./out --dev false
二.android平台：
react-native bundle --platform android --dev f...
推荐项目：React Native Background Upload
react-native-background-uploadUpload files in your React Native app even while it's backgrounded. Supports Android and iOS, including camera roll assets.项目地址:http...
