react将文件转为base64进行上传

需求

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

业务场景

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

逻辑思路

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

代码实现

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

<input
  type="file"
  multiple
  ref={uploadInputRef}
  onChange={uploadFileOnChange}
 />
1
2
3
4
5
6

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);
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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,
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

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