如何在Angular中将上传数据的9位数字转为10位数字

我是Angular新手，现有Angular页面可上传含6列数据的.csv文件。在调用.NET API前，需处理第一列数据：若值为9位数字，需在其前缀添加‘0’转为10位数字（例如‘609878837’转为‘0609878837’）。

示例数据 #

UserNumber      876876876               
DESCRIPTION     Hello               
AccountNumber   State   Current Premium Interest    Total
1207614641       FL         GG  200.51   24.58     225.09
 217614234       FL         GG  474.65   51.77     526.42

现有Angular代码 #

模板代码 #

<input #fileUpload type="file" class="file-upload" name="fileUpload" id="fileUpload" accept=".xlsx,.xls,.csv" required (change)="onFileChange($event)">
<button (click)="UploadFile(form.value)" type="button" mat-raised-button color="primary" [disabled]="!fileSelected">Upload</button>

组件逻辑代码 #

onFileChange(event: any): void {
  this.file = event.target.files[0];

  if (this.file) {
    console.log("this.file.type: " + this.file.type);

    const fileName = this.file.name;

    this.fileSelected = true;
    this.invalidFileType = false;
    this.invalidFileSize = false;
    this.invalidFileRecords = false;
    let file: File = this.file;
    var value;
    const fileReader = new FileReader();

    fileReader.onload = (e: any) => {
      value = e.target.result;

      this.data = value;

      var rows = e.target.result.split("\n");
      if (rows.length > 6003) {
        LoggerService.error(`upload records less than 6K.`, true, true);
      }

    };

    fileReader.readAsBinaryString(this.file);
  }
}
    

UploadFile(filevalue) {
  const reqbody = {
    filename: this.file?.name,
    destinationPath: '',
    lines: this.data.replace(/[^a-zA-Z0-9,\n\r.'"]/g, "").split('\r\n')
  };

  var route = "CallNETAPI";
  this.dataService.post(reqbody, route).subscribe(
    (data: any[]) => {
      console.log("Response data: " + data);
      LoggerService.success(`File successfully uploaded to server`, true, false);
      this.responseData = data;
    },
    (error: Response) => {
      this.displayError = true;
      this.errorText = `Error from CallNETAPI API service ${error.status}`;
    });
}

你可以在构建请求体前，遍历每行数据并针对性处理第一列，以下是两种可行方案：

方案一：在UploadFile中直接处理（推荐） #

修改UploadFile方法，在生成lines数组时完成格式修正：

UploadFile(filevalue) {
  // 处理每行数据，修正第一列格式
  const processedLines = this.data.replace(/[^a-zA-Z0-9,\n\r.'"]/g, "").split('\r\n').map(line => {
    // 跳过空行和表头行
    if (!line.trim() || line.startsWith('UserNumber') || line.startsWith('DESCRIPTION') || line.startsWith('AccountNumber')) {
      return line;
    }

    // 按空格分割列（兼容多空格分隔的情况）
    const columns = line.trim().split(/\s+/);
    if (columns.length === 0) return line;

    // 判断第一列是否为9位纯数字，是则前缀加0
    const firstCol = columns[0].trim();
    if (/^\d{9}$/.test(firstCol)) {
      columns[0] = '0' + firstCol;
    }

    // 重新拼接成原格式的行
    return columns.join(' ');
  });

  const reqbody = {
    filename: this.file?.name,
    destinationPath: '',
    lines: processedLines
  };

  var route = "CallNETAPI";
  this.dataService.post(reqbody, route).subscribe(
    (data: any[]) => {
      console.log("Response data: " + data);
      LoggerService.success(`File successfully uploaded to server`, true, false);
      this.responseData = data;
    },
    (error: Response) => {
      this.displayError = true;
      this.errorText = `Error from CallNETAPI API service ${error.status}`;
    });
}

方案二：在读取文件时提前处理 #

如果希望在文件读取阶段就完成数据修正，可以修改onFileChange中的fileReader.onload逻辑：

fileReader.onload = (e: any) => {
  value = e.target.result;

  // 提前处理数据格式
  const processedValue = value.split("\n").map(line => {
    if (!line.trim() || line.startsWith('UserNumber') || line.startsWith('DESCRIPTION') || line.startsWith('AccountNumber')) {
      return line;
    }
    const columns = line.trim().split(/\s+/);
    if (columns.length === 0) return line;
    const firstCol = columns[0].trim();
    if (/^\d{9}$/.test(firstCol)) {
      columns[0] = '0' + firstCol;
    }
    return columns.join(' ');
  }).join("\n");

  this.data = processedValue;

  var rows = processedValue.split("\n");
  if (rows.length > 6003) {
    LoggerService.error(`upload records less than 6K.`, true, true);
  }
};

关键逻辑说明 #

• 用map遍历每行，跳过无需处理的空行和表头
• 正则/\s+/处理多空格分隔的列，兼容CSV的格式
• 正则/^\d{9}$/精准匹配9位纯数字，避免误处理其他格式的内容

内容的提问来源于stack exchange，提问作者kumas srunk