react将文件转为base64上传的示例代码

<input
  type="file"
  multiple
  ref={uploadInputRef}
  onChange={uploadFileOnChange}
 />

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);
    }
  }
};

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,
  };
};