需求
将图片、pdf、word、excel等文件进行上传。图片、pdf等调接口A、word、excel等附件调接口B。接口关于文件是base64格式的参数文章来源:https://www.toymoban.com/news/detail-695125.html
业务场景
上传资源,区分影像与附件文章来源地址https://www.toymoban.com/news/detail-695125.html
逻辑思路
- 使用原生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进行上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!