Angular 5提交ngForm时如何携带文件与表单数据上传（Laravel后端）

你已经成功拿到了文件对象，接下来只需要把它和其他表单数据一起打包成FormData对象，再提交给Laravel后端就可以了——因为ngModel本身不支持文件类型的双向绑定，FormData是处理文件上传的标准方式。

步骤1：修改组件的onSubmit方法 #

提交时先创建FormData实例，把model里的所有普通字段逐个添加进去，再添加上你拿到的文件，这样就能把两类数据整合在一起：

onSubmit() {
  this.loading = true;

  // 创建FormData实例用于打包数据
  const formData = new FormData();
  
  // 遍历添加所有普通表单字段
  Object.keys(this.model).forEach(key => {
    formData.append(key, this.model[key]);
  });
  
  // 添加上传文件（先判断文件是否存在）
  if (this.fileToUpload) {
    formData.append('uploaded_file', this.fileToUpload, this.fileToUpload.name);
  }

  // 调用服务提交整合后的FormData
  this._dataService.create(formData, company_url).subscribe(data => {
    this.submitted = true;
    this.loading = false;
    this.companyForm.reset();
    this.fileToUpload = null; // 提交后重置文件对象
  }, error => {
    this.loading = false;
    console.log(error);
    this.error_message = error;
  });
}

步骤2：调整数据服务的create方法 #

因为现在发送的是FormData，不要手动设置Content-Type请求头——Angular会自动为FormData设置正确的multipart/form-data头（包含必要的boundary标识），修改服务代码如下：

create(formData: FormData, url: string): Observable<any> {
  // 直接发送FormData即可，无需额外配置headers
  return this.http.post<any>(url, formData);
}

步骤3：Laravel后端接收数据 #

在Laravel控制器里，你可以通过Request对象同时获取普通字段和上传文件：

public function store(Request $request)
{
    // 获取普通表单字段（替换成你的实际字段名）
    $title = $request->input('title');
    $description = $request->input('description');
    
    // 处理上传文件
    if ($request->hasFile('uploaded_file')) {
        $file = $request->file('uploaded_file');
        // 示例：将文件存储到storage/app/uploads目录
        $storagePath = $file->store('uploads');
    }
    
    // 后续业务逻辑...
    return response()->json(['status' => 'success']);
}

额外小提示 #

• 如果你的表单字段不多，也可以不用遍历，手动逐个添加字段，比如formData.append('title', this.model.title)，更灵活可控。
• 提交成功后记得重置文件输入框的状态，避免下次提交重复上传旧文件。

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