react将文件转为base64上传的示例代码
作者：ATWLee
本文主要介绍了react将文件转为base64上传的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
需求
将图片、pdf、word、excel等文件进行上传。图片、pdf等调接口A、word、excel等附件调接口B。接口关于文件是base64格式的参数
业务场景
上传资源，区分影像与附件
逻辑思路
- 使用原生input标签，type='file'，进行上传
- 上传后的回调，对文件进行分类，影像与附件
- 对文件进行base64编码
- 执行接口进行上传
代码实现
点击input进行上传，选择文件后执行onChange回调
<input
type="file"
multiple
ref={uploadInputRef}
onChange={uploadFileOnChange}
/>对文件进行分类，我这里是通过type去判断的
export const uploadFileOnChange = async (e: ChangeEvent<HTMLInputElement>) => {
const files = e.target.files;
// 将影像以及附件分类
const images: File[] = [];
const attachments: File[] = [];
for (const iterator of files ?? []) {
if (
iterator.type.includes('sheet') ||
iterator.type.includes('excel') ||
iterator.type.includes('csv') ||
iterator.type.includes('word')
) {
attachments.push(iterator);
} else {
images.push(iterator);
}
}
};对文件进行base64编码
async function readFileAsDataURL(file: Blob) {
const result_base64 = await new Promise<string>((resolve) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () =>
typeof fileReader.result === 'string' && resolve(fileReader.result);
});
return result_base64.split('base64,')[1];
}
export const uploadFileOnChange = async (e: ChangeEvent<HTMLInputElement>) => {
const files = e.target.files;
// 将影像以及附件分类
const images: File[] = [];
const attachments: File[] = [];
for (const iterator of files ?? []) {
if (
iterator.type.includes('sheet') ||
iterator.type.includes('excel') ||
iterator.type.includes('csv') ||
iterator.type.includes('word')
) {
attachments.push(iterator);
} else {
images.push(iterator);
}
}
const imageData: ImageData[] = [];
const affixData: AffixData[] = [];
for (const i of images) {
const imgBase64 = await readFileAsDataURL(i);
imageData.push({
name: i.name,
imgBase64,
});
}
for (const i of attachments) {
const affixBase64 = await readFileAsDataURL(i);
affixData.push({
name: i.name,
affixBase64,
});
}
return {
imageData,
affixData,
};
};拿到上一步返回的数据调接口
到此这篇关于react将文件转为base64上传的示例代码的文章就介绍到这了,更多相关react将文件转为base64进行上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！