Question

我创建了一个图像上传表单，选择图像时需要在其中预览图像。但是当我上传文件时，我必须单击页面上的来显示它。

    fileProgress(fileInput: any): void {
    this.fileData = <File>fileInput.target.files[0];
    this.preview();
  }

  preview(): void {
    // Show preview 
    const mimeType = this.fileData.type;
    if (mimeType.match(/image\/*/) == null) {
      return;
    }

    const reader = new FileReader();
    reader.readAsDataURL(this.fileData);
    reader.onload = (_event) => {
      this.previewUrl = reader.result;
    }
  }

这是html：

 <div class="form-group kt-form__group row">
                    <!-- Preview -->
                    <div *ngIf="previewUrl!=null"
                        class="justify-content-center text-center col-lg-6 kt-margin-bottom-20-mobile">
                        <img [src]="previewUrl" />
                    </div>
                </div>

<ngx-mat-file-input (change)="fileProgress($event)"></ngx-mat-file-input>

Answer 1

您可以使用文件上传

首先，像这样设置您的html

 <img [src]="imageSrc" style="max-width:300px;max-height:300px" />
 <input name="imageUrl" type="file" accept="image/*" (change)="handleInputChange($event)" />

第二，处理输入文件

imageSrc:string = '';

handleInputChange(e) {
   let file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
   let pattern = /image-*/;
   let reader = new FileReader();
   if (!file.type.match(pattern)) {
     alert('invalid format');
     return;
   }
   reader.onload = this._handleReaderLoaded.bind(this);
   reader.readAsDataURL(file);
 }

 _handleReaderLoaded(e) {
   let reader = e.target;
   this.imageSrc = reader.result;
 }

请检查example

上传时显示预览图像

1 个答案: