react将文件转为base64进行上传

需求

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

业务场景

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

逻辑思路

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

代码实现

  1. 点击input进行上传,选择文件后执行onChange回调
typescript 复制代码
<input
  type="file"
  multiple
  ref={uploadInputRef}
  onChange={uploadFileOnChange}
 />
  1. 对文件进行分类,我这里是通过type去判断的
typescript 复制代码
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);
    }
  }
};
  1. 对文件进行base64编码
typescript 复制代码
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,
  };
};
  1. 拿到上一步返回的数据调接口
相关推荐
一只小风华~8 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱26 分钟前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.1 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
每天吃饭的羊2 小时前
state和ref
前端·javascript·react.js
GEO_YScsn2 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing2 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
摇滚侠2 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
GISer_Jing2 小时前
滴滴二面准备(一)
前端·javascript·面试·ecmascript
lecepin2 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试
书源3 小时前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js