角度如何在编辑模式下上传图像并将图像检索为字符串？

Posted 2023-03-27

【中文标题】角度如何在编辑模式下上传图像并将图像检索为字符串？

【英文标题】：angular how to upload image and retrieve image as string in edit mode?

【发布时间】：2021-12-22 17:11:21

【问题描述】：

我正在使用 this link 上的这些视频学习使用 angular 和 asp.net 核心构建应用程序 - 单元表格，课程 - Felipe Gavilan 的“从计算机中选择图像” - 在 VSCode 上。除了用图像编辑组件外，一切正常。本教程创建了两个接口（两个模型） - 一个用于以字符串形式检索图像，另一个用于通过上传创建图像。当我运行应用程序时，我收到如下错误但相同的代码在教程中有效，我不知道为什么

类型“actorDTO”不可分配给类型“actorCreationDTO” 属性“图片”的类型不兼容。 类型“字符串”不可分配给类型“文件”。 src/app/actors/edit-actor/edit-actor.component.ts:7:24 templateUrl: './edit-actor.component.html', 组件EditActorComponent的模板出错。

下面一行中的错误是由于两个模型接口（1）actorCreationDTO，它具有文件类型的“图片”（用于创建和上传图像）和（2）actorDTO，它具有字符串类型的“图片”（用于在编辑模式下检索）

actors.model.ts

            export interface actorCreationDTO
        name:string;
        dateOfBirth:Date;
        picture:File;
        biography?:string;
        

        export interface actorDTO
            name:string;
            dateOfBirth:Date;
            picture:string;
            biography?:string;

            

form-actor.component.html

            <form (submit)="saveChanges()" [formGroup]="form">
            <mat-form-field appearance="outline">
                <mat-label>Name*</mat-label>
                <input formControlName="name" matInput>
                <mat-error>The name is required</mat-error>
            </mat-form-field>
            <mat-form-field appearance="outline">
                <mat-label>Date Of Birth</mat-label>
                <input formControlName="dateOfBirth" matInput [matDatepicker]="picker">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
            <h4>Select Picture</h4>
            <app-input-img 
        [urlCurrentImage]="model?.picture"  (onImageSelected)="onImageSelected($event)"></app-input-img>
        
        <!-- <app-input-img 
            (onImageSelected)="onImageSelected($event)"></app-input-img>
            -->
            <h4>Biography</h4>
            <app-input-markdown [markdownContent]="model?.biography" (changeMarkdown)="changeMarkdown($event)"></app-input-markdown>

        <div><button mat-flat-button color="primary" [disabled]="form.invalid">Save Changes</button>
        <a mat-stroked-button routerLink="/actors" >Cancel</a>
        </div>
        </form>

form-actor.component.ts

      import  Component, EventEmitter, Input, OnInit, Output  from '@angular/core';
  import  FormBuilder, FormGroup, Validators  from '@angular/forms';
  import  actorCreationDTO  from '../actors.model';

  @Component(
    selector: 'app-form-actor',
    templateUrl: './form-actor.component.html',
    styleUrls: ['./form-actor.component.css']
  )
  export class FormActorComponent implements OnInit 

    constructor(private formBuilder:FormBuilder)  
    form!:FormGroup;
  @Input()
  model!:actorCreationDTO;
    @Output()
    onSaveChanges=new EventEmitter<actorCreationDTO>();
    ngOnInit(): void 
      this.form=this.formBuilder.group(
        name: ['',
          validators:[Validators.required]
        ],
        dateOfBirth:'',
        picture:'',
        biography:''
      );
      if(this.form!==undefined)
      
        this.form.patchValue(this.model);
      
    
    onImageSelected(image: any)
      this.form.get('picture')?.setValue(image);
    
    changeMarkdown(content: any)
      this.form.get('biography')?.setValue(content);
    
    saveChanges()
      this.onSaveChanges.emit(this.form.value);
    
  

create-actor.component.html

            <h2>Create Actor</h2>
        <app-form-actor (onSaveChanges)="saveChanges($event)"></app-form-actor>

create-actor.component.ts

        import  Component, OnInit  from '@angular/core';
    import  actorCreationDTO  from '../actors.model';

    @Component(
      selector: 'app-create-actor',
      templateUrl: './create-actor.component.html',
      styleUrls: ['./create-actor.component.css']
    )
    export class CreateActorComponent implements OnInit 

      constructor()  

      ngOnInit(): void 
      
      saveChanges(actorCreationDTO:actorCreationDTO)
        console.log(actorCreationDTO);

      
    

edit-actor.component.html

        <h2>Edit Actor</h2>
    <app-form-actor [model]="model" (onSaveChanges)="saveChanges($event)"></app-form-actor>

edit-actor.component.ts

        import  Component, OnInit  from '@angular/core';
    import  ActivatedRoute, Router  from '@angular/router';
    import  actorCreationDTO, actorDTO  from '../actors.model';

    @Component(
      selector: 'app-edit-actor',
      templateUrl: './edit-actor.component.html',
      styleUrls: ['./edit-actor.component.css']
    )
    export class EditActorComponent implements OnInit 

      constructor(private activatedRoute:ActivatedRoute)  

    model:actorDTO =name: 'Tom Holland',dateOfBirth: new Date(), 
    picture:'https://www.nme.com/wp-content/uploads/2021/01/Chris-Evans-Captain-America-696x442.jpg',
    biography:'default value'
            
      ngOnInit(): void 
        // this.router.navigate(['edit',id],  relativeTo: this.route );

        this.activatedRoute.params.subscribe(params=>
          
          // alert(params.id);
          );
      

   
    saveChanges(actorCreationDTO:actorCreationDTO)
      console.log(actorCreationDTO);

    

    

index-actors.component.html

            <h2>Actors</h2>
        <button mat-flat-button color="primary" type="button" routerLink="/actors/create">Create New</button>

index-actors.component.ts

      import  Component, OnInit  from '@angular/core';

  @Component(
    selector: 'app-index-actors',
    templateUrl: './index-actors.component.html',
    styleUrls: ['./index-actors.component.css']
  )
  export class IndexActorsComponent implements OnInit 

    constructor()  

    ngOnInit(): void 
    

  

【参考方案1】：

好像你绑定的时候数据模型不匹配

在

edit-actor.component.ts

使用

model: actorCreationDTO = 
    // your object

而不是

model: actorDTO = 
    // your object

或者，你必须改变

在

form-actor.component.ts

这个

model!:actorCreationDTO;

进入这个

model!:actorDTO;