在我的 Angular-12 项目中，我使用以下代码注册用户并使用 Laravel-8 api 将图像插入到目录和数据库中：
界面：
export interface ICompanySetup {
companyName: string;
registrationNumber: string;
dateEstablished: Date;
company_logo: any;
}
服务：
createCompanySignup(data: any): Observable<ICompanySetup[]> {
return this.http.post<ICompanySetup[]>(this.api.baseURL + 'signup', data, this.httpOption);
}
组件：
import {
ApiService
} from 'src/app/services/api.service';
export class SignupComponent implements OnInit {
isLinear = true;
isLoading = false;
companySetupForm!: FormGroup;
companyForm!: FormGroup;
idForm!: FormGroup;
imageSrcLogo!: string | ArrayBuffer;
files: any;
constructor(
private fb: FormBuilder,
private api: ApiService,
private route: Router,
) {}
onFileChange(event: any) {
const reader = new FileReader();
if (event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
this.imageSrcLogo = reader.result as string;
this.companyInfoForm.get('company_logo') ? .setValue(file);
};
}
}
ngOnInit() {
this.companyForm = this.fb.group({
companyName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(100)]],
dateEstablished: ['', [Validators.required]],
company_logo: ['', [
RxwebValidators.extension({
extensions: ["jpg", "jpeg", "bmp", "png", "gif", "svg"]
})
]],
}, {
updateOn: "blur"
});
this.idForm = this.fb.group({
registrationNumber: ['', [Validators.required, Validators.maxLength(100)]],
});
}
get fc() {
return this.companyForm.controls;
};
get fi() {
return this.idForm.controls;
};
onSubmit() {
this.isSubmitted = true;
const formCompanyData = this.companyForm.getRawValue();
const formIdData = this.idForm.getRawValue();
const formData = new FormData();
var datestr = (new Date(formCompanyData.dateEstablished)).toUTCString();
formData.append('companyName', formCompanyData.companyName);
formData.append("company_logo", this.files, this.files.name);
formData.append('registrationNumber', formCompanyData.registrationNumber);
formData.append("dateEstablished", datestr);
this.spinnerService.show();
const header = {
'Content-Type': 'application/json'
};
this.isLoading = true;
this.companyService.createCompanySignup(formData).subscribe((res: any) => {
this.router.navigate(['admin/category']).then(() => this.showToasterSuccess(res.message));
},
error => this.router.navigate(['admin/category']).then(() => this.showToasterError(error[0].message))
);;
}
}HTML：
<mat-horizontal-stepper [linear]="isLinear" #stepper labelPosition="bottom">
<mat-step [stepControl]="companyForm">
<form [formGroup]="companyForm">
<ng-template matStepLabel matStepperIcon="phone">Company Info</ng-template>
<div class="col-md-4">
<div class="card card-primary card-outline">
<div class="card-body box-profile">
<div class="text-center">
<img class="profile-user-img img-fluid img-circle" [src]="imageSrcLogo || 'assets/img/no-image.png'" alt="No Company Logo" style="height:150px; width:150px">
</div>
<h3 class="profile-username text-center">Company Logo</h3>
<div class="form-group">
<label for="file"></label>
<input formControlName="company_logo" id="file" type="file" class="form-control" (change)="onFileChange($event)">
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="form-group">
<label for="dateEstablished">Date Registered:<span style="color:red;">*</span></label>
<mat-form-field fxFlex="100%" fxFlex.gt-sm>
<input matInput [matDatepicker]="dateEstablished" placeholder="Choose a date" [max]="tomorrow" formControlName="dateEstablished" readonly required>
<mat-datepicker-toggle matSuffix [for]="dateEstablished"></mat-datepicker-toggle>
<mat-datepicker #dateEstablished></mat-datepicker>
</mat-form-field>
</div>
<div *ngIf="fc.dateEstablished.touched && fc.dateEstablished.invalid">
<div *ngIf="fc.dateEstablished.hasError('required')">
<div class="text-danger">
Date Registered is required!
</div>
</div>
</div>
</div>
<div class="col-12 col-md-8">
<div class="form-group">
<label for="name">Company Name:<span style="color:red;">*</span></label>}
<input type="text" formControlName="companyName" placeholder="Company Name" class="form-control" required/>
</div>
<div *ngIf="fc.companyName.touched && fc.companyName.invalid">
<div *ngIf="fc.companyName.hasError('required')">
<div class="text-danger">
Company Name is required!
</div>
</div>
<div *ngIf="fc.companyName.hasError('minlength')">
<div class="text-danger">
Company Name cannot be less than 3 characters!
</div>
</div>
<div *ngIf="fc.companyName.hasError('maxlength')">
<div class="text-danger">
Company Name cannot be more than 100 characters!
</div>
</div>
</div>
</div>
<div class="card-footer">
<button mat-raised-button color="primary" matStepperNext [disabled]="companyForm.status != 'VALID'">Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="idForm">
<form [formGroup]="idForm">
<ng-template matStepLabel>Company ID</ng-template>
<div class="col-12 col-md-12">
<div class="form-group">
<label for="registration_number">Registration Number:<span style="color:red;">*</span></label>
<input type="text" formControlName="registrationNumber" placeholder="Registration Number" class="form-control" required/>
</div>
<div *ngIf="fi.registrationNumber.touched && fi.registrationNumber.invalid">
<div *ngIf="fi.registrationNumber.hasError('required')">
<div class="text-danger">
Company Reg. No. is required!
</div>
</div>
<div *ngIf="fi.registrationNumber.hasError('maxlength')">
<div class="text-danger">
Company Reg. No. cannot be more than 100 characters!
</div>
</div>
</div>
</div>
<div class="card-footer">
<button mat-raised-button color="black" matStepperPrevious>Back</button>
<button mat-raised-button color="success" [disabled]="isLoading" type="submit" (click)="onSubmit()">
<span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span>
Submit
</button>
<button mat-raised-button color="warn" (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>this.files.name 是更改时 company_logo 的名称。
当我提交表单时，我收到了这两 (2) 个错误：
<块引用>它指向：
<块引用>formData.append("company_logo", this.files, this.files.name);
我正在尝试使用徽标上传来注册用户。我已经解决了很长时间没有任何解决方案。
我该如何解决这个问题？
或者有什么更好的方法吗？
尤其是第一个错误。
谢谢
答案 0 :(得分：0)
在您发布的代码中，您没有在任何地方为 this.files 设置值。由于错误指出字段 this.files 仍然是 undefined，因此当它尝试访问 this.files.name 时，它报告错误，在 undefined 上找不到任何字段名称。
解决方案：为 this.files 设置一个值并确保它也包含一个字段 name。