【发布时间】：2019-07-23 08:50:11
【问题描述】：
我正在使用 Angular 制作注册表单，其中包含一些信息（姓名、电子邮件、密码和头像）。后端我使用 NodeJS 和 MongoDB 来存储信息。关于后端我已经写好了注册API。我在邮递员上测试过，它适用于后端！
但是在 Angular 客户端中，当我从注册表单中输入信息时，出现错误，我正在使用 formData 将输入表单发送到后端 API。
我正在使用 formGroup 发送我的用户系统对象，包括（姓名、角色、电子邮件、密码和头像）
这是我的 html 文件。
<div class="common-form float_left ">
<form [formGroup]="dialogRegisterUserSysForm" >
<div class="field_wrapper box FlowupLabels">
<label class="label">NAME</label>
<div class="field fl_wrap pad-top-0">
<input type="text" name="name" formControlName="name" maxlength="255" placeholder="Enter user system name" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<div class="clr"></div>
</div>
<div class="field_wrapper box FlowupLabels">
<label class="label">PASSWORD</label>
<div class="field fl_wrap pad-top-0">
<input type="password" id="illness-name" class="input-big hc_name fl_input ui-autocomplete-input" name="password" formControlName="password" maxlength="255" placeholder="Please enter a password" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<div class="error_field" id="testResultsErrors"></div> <div class="clr"></div>
</div>
<div class="field_wrapper box FlowupLabels">
<label class="label">EMAIL</label>
<div class="field fl_wrap pad-top-0">
<input type="text" id="illness-name" class="input-big hc_name fl_input ui-autocomplete-input" name="email" formControlName="email" maxlength="255" placeholder="Enter an email." autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<div class="error_field" id="testResultsErrors"></div> <div class="clr"></div>
</div>
<div>
<label>Upload Avatar</label>
<input (change)="onFileSelect($event.target)" type="file" formControlName="avatar" class="form-control">
</div>
<div class="save-cancel-btngrp-wrap">
<div class="cancel-link switchToViewMode" style="float: right">
<a (click)="matDialogRef.close(dialogRegisterUserSysForm)" class="switchToViewMode btn flat">CANCEL</a>
</div>
<div *ngIf="action =='new'" class="cancel-link switchToViewMode" style="float: right">
<a (click)="matDialogRef.close(['save',dialogRegisterUserSysForm])" class="switchToViewMode btn flat">SAVE</a>
</div>
</div>
</form>
</div>
在这个表单中，头像是文件输入，我写了“onFileSelect(input)”方法。
onFileSelect(input) {
var fInput = input.files[0];
var fileName = fInput.name;
alert(fileName);
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = (e: any) => {
alert("Result: " + e.target.result);
this.userSys.avatar = e.target.result;
// reader.readAsDataURL(input.files[0]);
}
// this.userSys.avatar = e.target.result;
reader.readAsDataURL(input.files[0]);
}
}
下面是我的 ts 文件。
import { FormBuilder, FormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { UserSysService } from '../usersys.service';
import { UserSysModel } from '../usersys.model';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
selector : 'usersys-form-dialog',
templateUrl : './usersys-form.component.html',
styleUrls : ['./usersys.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class UserSysFormDialogComponent
{
action: string;
userSys: UserSysModel; // Medical report model
dialogRegisterUserSysForm: FormGroup;
dialogTitle: string;
/**
* Constructor
*
* @param {MatDialogRef<MedicalReportFormDialogComponent>} matDialogRef
* @param _data
* @param {FormBuilder} _formBuilder
*/
constructor(
// private _mrReportService: HealthMedicalReportService,
public matDialogRef: MatDialogRef<UserSysFormDialogComponent>,
@Inject(MAT_DIALOG_DATA) private _data: any,
private _formBuilder: FormBuilder
)
{
// this.dialogTitle = 'Add New Medical Report';
// set default here
this.action = this._data.action;
if(this.action === 'edit'){
this.dialogTitle = 'Edit User System';
this.userSys = _data.userSys;
}else{
this.dialogTitle = 'Register new User System';
this.userSys = new UserSysModel({});
}
this.dialogRegisterUserSysForm = this.createUserSystemDialogForm();
}
onFileSelect(input) {
var fInput = input.files[0];
var fileName = fInput.name;
alert(fileName);
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = (e: any) => {
alert("Result: " + e.target.result);
this.userSys.avatar = e.target.result;
// reader.readAsDataURL(input.files[0]);
}
// this.userSys.avatar = e.target.result;
reader.readAsDataURL(input.files[0]);
}
}
/**
* Create UserSystem form
*
* @returns {FormGroup}
*/
createUserSystemDialogForm(): FormGroup
{
return this._formBuilder.group({
email : [this.userSys.email],
password : [this.userSys.password],
name : [this.userSys.name],
avatar : [this.userSys.avatar]
});
}
}
但我收到错误“fakepath”，我无法将此表单发布到服务器。
我认为我的英语不好，所以可能我的解释很难理解。 非常感谢你
【问题讨论】：
标签： javascript node.js angular httpclient