angular - 发送前更改表单的特定值

Question

我有一个用户注册页面，我希望用户能够上传他自己的头像图片。到目前为止，我的逻辑是上传图片，调用更改将图片转换为 UInt8Array 以将其存储在 Mongo 上的函数。所以我有：

 onRegister(form):void{
this.authService.register(form.value).subscribe(res =>{
  this.router.navigateByUrl('/auth');
})}

该函数在提交时调用，它获取整个表单数据并将其发送到 authService.register。但是，UInt8Array 数据存储在另一个变量中。如何“打开” form.value 来修改头像值？

html供参考：

<form #frmRegister="ngForm" class="login-container" (ngSubmit)="onRegister(frmRegister)">
      <p><input type="text" name="name" placeholder="Nombre" ngModel required></p>
      <p><input type="email" name="email" placeholder="Email" ngModel required></p>
      <p><input type="password" name="password" placeholder="Contraseña" ngModel required></p>
      <p><label name="signature_UintArray">Avatar</label>
        <input type="file" name="avatar" placeholder="avatar"(change)="avatartoUintArray($event)"></p>  
      <p>
        <label for="role">Elige un rol</label>
          <select [(ngModel)]="selectedRol" name="role" placeholder="avatar" ngModel >
            <option *ngFor="let rol of role" [ngValue]="rol">{{rol}}</option>
          </select>
          </p>
      <p><input type="submit" value="Register"></p>
    </form>

和 avatartoUintArray()

avatartoUintArray(archivo){
    (archivo, callback) =>{
      let fr = new FileReader();
      fr.onload = function(){
        var arrayBuffer = this.result;
        var array = new Uint8Array(<ArrayBuffer>arrayBuffer);
        callback(array);
        };
   fr.readAsArrayBuffer(archivo.target.files[0]);
  }
    }

  callback(Uint8info){
    this.avatar = Uint8info;
  }

标签： angularforms

Answer 1

尝试：

onRegister(form) :void {
  const formValue = { ...form.value };
  const formValueForApi = {
    ...formValue,
    avatar: // I assume the key is called avatar, overwrite it to what you would like.
  };
  console.log(formValueForApi); See if it is what you would like
  this.authService.register(formValueForApi).subscribe(res =>{
    this.router.navigateByUrl('/auth'); 
  });
}