react将文件转为base64进行上传

需求

将图片、pdf、word、excel等文件进行上传。图片、pdf等调接口A、word、excel等附件调接口B。接口关于文件是base64格式的参数

业务场景

上传资源，区分影像与附件

逻辑思路

1. 使用原生input标签，type='file'，进行上传
2. 上传后的回调，对文件进行分类，影像与附件
3. 对文件进行base64编码
4. 执行接口进行上传

代码实现

1. 点击input进行上传，选择文件后执行onChange回调

<inputtype="file"multipleref={uploadInputRef}onChange={uploadFileOnChange}/>

2. 对文件进行分类，我这里是通过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);}}
};

3. 对文件进行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,};
};

4. 拿到上一步返回的数据调接口