如何在Angular文件上传组件中获取纯Base64编码内容（去除data协议前缀）

DevOps 小满

2026-5-1

嘿，这个问题我之前做文件上传功能的时候也碰到过！其实readAsDataURL()方法返回的本来就是完整的Data URL格式，所以会带有data:xxx;base64,的前缀。要提取纯Base64编码部分，有两种简单的方法：

方法一：使用字符串分割（最直观）

利用Data URL的格式特点——它只会有一个逗号分隔前缀和Base64内容，直接用split(',')分割字符串，取第二个元素就行：

uploadFile(files: FileList | null): void {
  if(files){
    const file = files.item(0)
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      // 提取纯Base64内容，加入可选链避免null报错
      const pureBase64 = reader.result?.toString().split(',')[1];
      
      // 确保获取到有效数据再添加到数组
      if (pureBase64) {
        this.documentsArray.push({
          documentType: this.form.controls.dokumentType.value,
          fileBase64: pureBase64,
          fileName: file.name
        });
        console.log(this.documentsArray);
      }
    }
  }
}

方法二：使用正则表达式（更严谨）

如果担心有特殊情况（虽然Data URL格式里逗号只会出现一次），可以用正则匹配逗号之后的所有内容：

uploadFile(files: FileList | null): void {
  if(files){
    const file = files.item(0)
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      // 用正则匹配逗号后的所有内容
      const matchResult = reader.result?.toString().match(/,(.*)$/);
      const pureBase64 = matchResult ? matchResult[1] : null;
      
      if (pureBase64) {
        this.documentsArray.push({
          documentType: this.form.controls.dokumentType.value,
          fileBase64: pureBase64,
          fileName: file.name
        });
        console.log(this.documentsArray);
      }
    }
  }
}