angular - Angular - 当图像为空时如何从插入中排除图像
问题描述
在 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 应该可以为空。
如何添加一个条件,当没有选择车辆图像时,它应该绕过并且应该没有错误?
谢谢
解决方案
像这样的东西,也许?您可以检查上传文件的长度是否大于0。如果为0,则上传的文件为空或不包含任何信息。在这种情况下,您的上传方法返回并且没有任何反应。
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),
};
如果这是您正在寻找的内容,请在评论中告诉我。
推荐阅读
- api - 从 s3 读取 csv 并作为多部分上传到外部 api
- laravel - 无法编辑 Laravel 集合的值
- python - 为什么我在并行处理时出错
- java - 改造 Kotlin - 发出一个 API 请求,然后再发出两个并发请求
- python - 有没有办法在不使用循环的情况下将一列添加到对另一列的数据进行日期时间操作的列表中?
- r - 将矩阵列表除以矩阵
- java - HttpUrlConnection 错误请求
- javascript - 关于使用 JavaScript 和 DOM 接口遍历 HTML 表格的问题
- bash - 如何杀死单个 GPU 的所有 nvidia 进程
- python - df.apply() 引发 IndexingError: Unalignable boolean Series 作为索引器提供