Angular 12 新增车辆时未选图片如何跳过图片插入不触发报错

你需要修改以下几个位置即可实现需求： #

1. 修复表单构建语法错误，调整图片字段验证规则

原来的表单定义漏了vehicle_image控件的声明，且需要配置为选填，仅当有值时触发扩展名校验：

createVehicle() {
  this.createForm = this.fb.group({
    registration_number: ['', [Validators.required]],
    // 补全vehicle_image控件，配置选填验证
    vehicle_image: ['', [
      RxwebValidators.extension({
        extensions: ["jpg", "jpeg", "bmp", "png", "gif", "svg"],
        // 仅当控件有值时才触发校验
        conditionalExpression: (control) => control.value != null
      })
    ]]
  });
}

如果你的Angular版本不支持上述条件验证，也可以直接删除vehicle_image的表单控件绑定（文件输入本身不支持Angular响应式表单的默认双向绑定，你已经通过onSelectFile事件存储了文件对象），完全通过自定义逻辑判断即可。

2. 提交时增加文件存在性判断，避免空值报错

构造提交参数时，仅当this.files存在时才传递vehicle_image字段，否则自动忽略该可选字段：

submitForm() {
  this.isSubmitted = true;
  if (this.createForm.invalid) {
    return;
  }
  // 可选字段按需赋值
  this.vehicle = {
    registration_number: this.createForm.value.registration_number,
    // 扩展运算符判断，有文件才加字段
    ...(this.files ? { vehicle_image: this.files.name } : {})
  };

  this.vehicleService.addVehicle(this.vehicle).subscribe(res => {
      this.data1 = res;
      this.tokenCreateHandler(res);
    },
    error => {
      this.store.dispatch(loadErrorMessagesSuccess(error));
      this.isLoading = false;
    });
}

可选优化：调整提交格式适配文件上传

你当前的代码只传递了文件名，后端无法拿到图片内容完成存储，建议改为FormData格式提交：

1. 修改服务层请求逻辑：

public addVehicle(vehicle: IVehicle, file?: File): Observable<IVehicle> {
  const formData = new FormData();
  formData.append('registration_number', vehicle.registration_number);
  // 有文件才追加到提交参数
  if (file) {
    formData.append('vehicle_image', file);
  }
  // 不要手动设置Content-Type，Angular会自动生成multipart边界
  return this.http.post<IVehicle>(this.api.baseURL + 'vehicles/add', formData);
}

2. 提交时调用方法传入文件对象：

this.vehicleService.addVehicle(this.vehicle, this.files).subscribe(...)

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