Angular文件上传问题：数据库存入‘C:\fakepath’无效路径

问题原因 #

浏览器出于安全限制，会隐藏文件的真实本地路径，input[type=file]的value属性只会返回带C:\fakepath的字符串。你直接提交memberForm.value时，image字段传递的就是这个假路径字符串，而非实际的文件对象，导致后端将其存入数据库。

解决方案 #

需要手动处理文件选择事件，保存真实的File对象，提交时通过FormData封装表单数据和文件后发送给后端。

1. 修改组件代码 #

在组件中添加变量存储选中的文件，更新文件选择和表单提交逻辑：

import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { HeaderService } from 'src/app/Services/header.service';
import { MemberService } from 'src/app/Services/member.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent implements OnInit, OnDestroy {
  constructor(
    private _headerService: HeaderService,
    private _fb: FormBuilder,
    private _memberService: MemberService
  ) {}
  memberForm!: FormGroup;
  members: any[] = [];
  selectedFile: File | null = null; // 新增变量存储选中的文件

  ulploadFile(event: any) {
    // 保存选中的File对象
    this.selectedFile = event.target.files?.[0] || null;
  }

  onSubmit() {
    // 校验是否选择了文件
    if (!this.selectedFile) {
      alert('请选择图片');
      return;
    }

    // 构建FormData，封装表单字段和文件
    const formData = new FormData();
    formData.append('fname', this.memberForm.get('fname')?.value || '');
    formData.append('lname', this.memberForm.get('lname')?.value || '');
    formData.append('image', this.selectedFile);

    this._memberService.addMember(formData).subscribe({
      next: (res: any) => {
        alert('员工添加成功');
        // 重置表单和选中文件状态
        this.memberForm.reset();
        this.selectedFile = null;
      },
      error: (err: any) => {
        console.error(err);
        alert('添加员工失败');
      },
    });
  }

  ngOnInit(): void {
    this.memberForm = this._fb.group({
      fname: [''],
      lname: [''],
      // 移除image表单控件，因为不再依赖它的value
    });

    this._headerService.headerTitle.next('Dashboard');
  }

  ngOnDestroy(): void {
    this._headerService.headerTitle.next('');
  }
}

2. 调整模板代码 #

移除文件输入框的formControlName（因为不再需要绑定表单控件），可以添加图片类型限制：

<form [formGroup]="memberForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="fname" /><br /><br />
  <input type="text" formControlName="lname" /><br /><br />
  <input
    type="file"
    (change)="ulploadFile($event)"
    accept="image/*" <!-- 限制仅选择图片文件 -->
  /><br /><br />
  <button>Save</button>
</form>

3. 后端处理说明 #

后端需要接收FormData中的image文件，将文件保存到服务器的静态资源目录，然后将文件的访问路径（例如/uploads/71Q5ZhQxgFL._AC_SX569_.jpg）存入数据库，而非本地路径。

验证 #

提交表单后，后端将收到包含文件二进制数据的FormData，处理后存储正确的文件访问路径到数据库，不再出现C:\fakepath前缀。

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