Angular响应式表单移除C:\fakepath\无效，提交仍带路径求助

你的代码存在两个核心问题，导致C:\fakepath\无法正确移除且提交逻辑异常：

• 文件名处理时机错误：你在获取选中文件前就执行了this.filename.split('C:\fakepath\')[1]，此时this.filename还未被赋值，这行代码完全无效，甚至可能将this.filename置为undefined。
• FormData参数错误：提交时你传入的this.filename是字符串而非File对象，且错误地用this.filename.name作为文件名参数——字符串没有name属性，这会导致逻辑混乱。

正确解决方案 #

浏览器出于安全限制会将文件路径替换为C:\fakepath\，但File对象本身的name属性就是纯文件名，不包含任何路径，无需手动拆分处理。正确做法是直接从选中的File对象中获取文件名，并保存File对象用于提交。

1. 修改文件选择逻辑

selectFiles(event: any): void {
  const selectedFiles = event.target.files;

  if (selectedFiles && selectedFiles[0]) {
    // 保存选中的File对象（单文件场景取第一个即可）
    this.selectedFile = selectedFiles[0];
    // 直接获取无路径的纯文件名
    this.cleanedFileName = this.selectedFile.name;

    const reader = new FileReader();
    reader.onload = (e: any) => {
      this.imageUrl = e.target.result;
      this.filedata = {
        id: this.FileData.length + 1,
        data: event,
        filename: this.cleanedFileName, // 使用纯文件名
        filescr: e.target.result,
      };
    };
    reader.readAsDataURL(this.selectedFile);
  }
}

2. 修正FormData提交代码

// 第二个参数传入File对象，第三个参数传入处理后的纯文件名
payload.append('file', this.selectedFile, this.cleanedFileName);

3. 多文件上传场景扩展

如果需要支持多文件，只需遍历选中的文件数组即可：

// 多文件选择逻辑
selectFiles(event: any): void {
  const selectedFiles = event.target.files;
  this.selectedFiles = Array.from(selectedFiles);
  this.cleanedFileNames = this.selectedFiles.map(file => file.name);
}

// 多文件提交逻辑
this.selectedFiles.forEach((file, index) => {
  payload.append('files', file, this.cleanedFileNames[index]);
});

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