Angular -当image为空时如何从插入中排除图像

Question

在Angular-12中，我正在尝试上传图像和插入其他字段。图像将直接进入后台，其名称将插入到数据库中。我有这样的代码：

接口：

export interface IVehicle {
  id?: number;
  registration_number: string;
  vehicle_image?: any;
}

服务：

public addVehicle(vehicle: IVehicle): Observable<IVehicle> {
  return this.http.post<IVehicle>(this.api.baseURL + 'vehicles/add', vehicle, this.httpOptions);
}

组件：

​

createForm!: FormGroup;
vehicle!: IVehicle;
isLoading = false;
isSubmitted = false;
url = '';
path = "";
files ? : any;
data1: any;

constructor(
  private fb: FormBuilder,
  private router: Router,
  private store: Store < AppState > ,
  private vehicleService: VehicleService,
) {}

createVehicle() {
  this.createForm = this.fb.group({
      registration_number: ['', [Validators.required]],
      [
        RxwebValidators.extension({
          extensions: ["jpg", "jpeg", "bmp", "png", "gif", "svg"]
        })
      ]]
  });
}

onSelectFile(event: any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.readAsDataURL(event.target.files[0]); // read file as data url
    this.files = event.target.files[0];
    reader.onload = (event: any) => { // called once readAsDataURL is completed
      //   console.log(event);
      this.url = event.target.result;
    }
  }
}

submitForm() {
  this.isSubmitted = true;

  // stop here if form is invalid
  if (this.createForm.invalid) {
    return;
  }
  this.vehicle = {
    registration_number: this.createForm.value.registration_number,
    vehicle_image: (this.files, 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;
    });
}
}

​

HTML：

​

<div class="col-lg-4">
  <div class="form-group">
    <label for="registration_number">Registration No.:<span style="color:red;">*</span></label>
    <input type="text" formControlName="registration_number" placeholder="XB-547-AG" class="form-control" required/>
  </div>
  <div *ngIf="isSubmitted || (fc.registration_number.touched && fc.registration_number.invalid)">
    <div *ngIf="fc.registration_number.hasError('required')">
      <div class="text-danger">
        Registration Number is required!
      </div>
    </div>
  </div>
</div>
<div class="col-lg-4">
  <div class="form-group">
    <label for="vehicle_image">Vehicle Image:</label>
    <div class="card-body box-profile">
      <div class="text-center">
        <img class="profile-user-img img-fluid img-circle" [src]="url || 'assets/img/no-image.png'" alt="No Vehicle Image" onerror="this.src='assets/img/no-image.png'" style="height:150px; width:150px">
      </div>
      <div class="form-group">
        <input formControlName="vehicle_image" id="vehicle_image" type="file" class="form-control" accept=".jpg,.jpeg,.bmp,.png,.gif,.svg" (change)="onSelectFile($event)">
        <div *ngIf="fc.vehicle_image.touched && fc.vehicle_image.invalid">
          <div *ngIf="fc.vehicle_image.hasError('extension')">
            <div class="text-danger">
              Enter valid File Type!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​

vehicle_image应该是可空的。

我如何添加一个条件，当没有选择vehicle_image时，它应该绕过，并且应该没有错误？

谢谢

Answer 1

也许是这样的吧？可以检查上传文件的长度是否大于0。如果为0，则上传的文件为空或不包含任何信息。在这种情况下，您的upload方法返回，但什么也不发生。

onSelectFile(event: any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();
    let img = event.target.files[0];
    
    // Check if img is something valid
    if(img.length == 0){
       this.files = undefined;
       return;
    }

    // continue if the uploaded file actually contains some information
    reader.readAsDataURL(img); // read file as data url
    this.files = img;

    reader.onload = (event: any) => { // called once readAsDataURL is completed
      //   console.log(event);
      this.url = event.target.result;
    }
  }
}

然后你可以这样构建你的模型：

this.vehicle = {
    registration_number: this.createForm.value.registration_number,
    vehicle_image: this.files == undefined 
         ? null
         : (this.files, this.files.name),
};

如果这就是你要找的，请在评论中告诉我。