Question

我有一个表单组，需要在profile_pic和banner_pic字段中发送两个图像。但是，通过所有发送服务器的方式都会返回一条错误消息，指出在字段中输入的值必须为file类型。

handleBanner(file: File) {
    this.fileBanner = file;
    const reader = new FileReader();
    reader.onload = (event: any) => {
       this.eventForm.patchValue({
        banner_pic: reader.result
     });

     this.urlPreviewBanner = event.target.result;
    }
     reader.readAsDataURL(file); 
}

<div class="col s1">
            <label for="selecionarFotoBannerEvento" style="cursor:pointer;">
              <img [src]="urlPreviewBanner"
                   alt=""
                   class="responsive-img"
                   width="800"/>
            </label>
          </div>
          <div class="col s9">
            <label for="selecionarFotoBannerEvento" style="cursor:pointer;">
              <p class="titulo-selecao-foto">&nbsp; Adicionar banner do evento</p>
              <p class="legenda">Recomendado imagens com tamanho 800x150.</p>
              <input formControlName="banner_pic" name="bannerHidden" type="hidden">
              <input 
                     (change)="handleBanner($event.target.files[0])"
                     type="file"
                     accept="image/*"
                     id="selecionarFotoBannerEvento"
                     style="display: none"/>
            </label>
          </div>
        </div>

当前，我可以在预览中显示图像，但是在提交响应时，服务器仍然声明值必须是文件类型。

Answer 1

我认为formControlName属性需要移到其他input标签。

        <label for="selecionarFotoBannerEvento" style="cursor:pointer;">
          <p class="titulo-selecao-foto">&nbsp; Adicionar banner do evento</p>
          <p class="legenda">Recomendado imagens com tamanho 800x150.</p>
          <input name="bannerHidden" type="hidden">
          <input formControlName="banner_pic"
                 (change)="handleBanner($event.target.files[0])"
                 type="file"
                 accept="image/*"
                 id="selecionarFotoBannerEvento"
                 style="display: none"/>
        </label>

Answer 2

这里有一个粗糙的示例，它在此处发送图像：https://github.com/dedd1993/angular-cms/blob/master/src/app/pages/clients/client-form/client-form.component.ts。

<div>
    <img class="preview-image" [src]="imageFile ? imageFile.link : 'localhost/image.png'">
    <button type="button" onclick="document.querySelector('#exampleInputFile').click()"></button>
    <input type="file" id="exampleInputFile" (change)="imagesPreview($event)" style="display: none;">
</div>

@Component({
    selector: 'app-form',
})
export class FormComponent implements OnInit {
    imageFile: {link: string, file: any, name: string};

    constructor(){ }

    imagesPreview(event) {
        if (event.target.files && event.target.files[0]) {
            const reader = new FileReader();

            reader.onload = (_event: any) => {
                this.imageFile = {
                    link: _event.target.result,
                    file: event.srcElement.files[0],
                    name: event.srcElement.files[0].name
                };
            };
            reader.readAsDataURL(event.target.files[0]);
        }
    }

    save(): void {
        const formData = new FormData();
        formData.append('myImageToSend', this.imageFile.file);
        formData.append('title', 'Set your title name here');
        formData.append('description', 'Set your title description here');

        this.clientService.create(formData).subscribe(data => {});
    }
}

Answer 3

HTML组件

     <form [formGroup]="controleForm" (submit)="upload()">
      <input   #fileInput    formControlName="image" type="file">
      <input   formControlName="user" type="file">
      <button   type="submit" > Send </button>
     </form>

TS组件

export class UploadComponent implements OnInit {

          @ViewChild("fileInput") fileInput;

          pointControleFilter: FormGroup;
          constructor(private _http: HttpClient) {}

          ngOnInit() {
            this.controleForm = new FormGroup({
              nom: new FormControl('', [Validators.required])    
           });
          }

      upload()
      {
        const formData = new FormData();
        formData.append('nom', this.controleForm.get('nom').value);
        formData.append('image', this.fileInput.nativeElement.files[0]);
        this._http.post('url' , formData).subscribe((res)=>{
           /* if all is ok */
           Console.log('image has been sent')
         });
      }
    }

如何在表单组的字段中发送图像？

3 个答案: