需求:
1.通过画布或者其他的获取图片插件生成base64
2.base64转换file上传文件
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)
....
}