Angular中通过input文件控件获取本地文件完整路径的问题求助

核心原因 #

现代浏览器出于用户隐私安全限制，禁止前端JavaScript代码获取本地文件的真实完整路径，就算你从input的value属性中取值，拿到的也是类似C:\fakepath\你的文件名的伪造路径，这是所有主流浏览器的通用安全策略，和Angular框架无关，没有任何绕过方法。

正确上传文件的解决方案 #

调用API上传文件根本不需要本地路径，直接把文件对象封装到FormData里传给后端接口即可，具体实现代码如下：

1. 修改component.ts代码 #

// 声明变量：imageShow用于本地预览，selectedFile用于存储待上传的文件对象
imageShow: string | ArrayBuffer | null = null;
selectedFile: File | null = null;

handleFileInput(event: Event) {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files.length > 0) {
    // 保存选中的文件对象，后续上传直接用
    this.selectedFile = target.files[0];
    
    // 若不需要本地预览可以删除下方FileReader相关逻辑
    const reader = new FileReader();
    reader.onload = (e) => {
      this.imageShow = e.target?.result ?? null;
    };
    reader.readAsDataURL(this.selectedFile);
  }
}

// 提交表单时调用该上传方法
uploadFile() {
  if (!this.selectedFile) {
    // 此处可添加未选择文件的提示逻辑
    return;
  }
  // 构造FormData对象
  const formData = new FormData();
  // 第一个参数要和后端接口要求的文件接收字段名保持一致，你的场景填cv即可
  formData.append('cv', this.selectedFile, this.selectedFile.name);
  
  // Angular HttpClient发起上传请求示例
  this.http.post('你的后端API上传地址', formData).subscribe({
    next: (res) => {
      console.log('上传成功', res);
    },
    error: (err) => {
      console.error('上传失败', err);
    }
  })
}

2. 注意事项 #

• 发起请求时不要手动修改Content-Type请求头，浏览器会自动识别FormData对象，设置正确的multipart/form-data类型和边界值，手动设置反而会导致请求失败
• 如果后端接口明确要求传本地文件路径，属于后端接口设计不符合Web端上传规范，需要和后端沟通修改接口适配标准文件上传逻辑
• 如果你是Electron等桌面端混合开发场景，可以调用框架提供的专属API获取真实路径，纯Web前端场景没有任何办法拿到真实本地路径

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