通过表单上传的我的图片在Ionic中没有采用正确的路径

Question

我在Ionic应用程序中工作，我有图像上传输入字段和上传按钮。我想将上传的图像显示为预览，但在上传图像后，它没有采用图像正确的路径。

错误：

不安全：C：\ fakepath \ 3.jpg net :: ERR_UNKNOWN_URL_SCHEME

这是我的updateimage.html：

<ion-content padding style="text-align: center;">
  <h2 class="myformh2">Update Profile Picture</h2>
  <h4 class="myformh2">Image Preview</h4>
  <img src="{{img_upload ? 'http://localhost:8100/assets/imgs/def_face.jpg' : img_upload}}" width="150" style="margin-bottom: 22px;"/>
  <form [formGroup]="updateprofileimg" (ngSubmit)="changeProfileImage()">
    <ion-list>
      <ion-item class="newitem2">
        <ion-input placeholder="Upload Image" type="file" [(ngModel)]="img_upload" formControlName="img_upload" required></ion-input>
      </ion-item>
      <div>
        <button [disabled]="!updateprofileimg.valid" ion-button type="submit" class="newbtn11" color="primary" block>Change Profile Picture</button>
      </div>
    </ion-list>
  </form>
</ion-content>

在这里我将上传的图像显示为img标签中的预览，但它显示错误。

这是我的updateimage.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

@IonicPage()
@Component({
  selector: 'page-updateimage',
  templateUrl: 'updateimage.html',
})
export class UpdateimagePage {
  updateprofileimg : FormGroup;
  img_upload: any = [];
  constructor(public navCtrl: NavController, public navParams: NavParams,
    private formBuilder: FormBuilder) {
      this.updateprofileimg = this.formBuilder.group({
        img_upload: ['', Validators.required],
      });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad UpdateimagePage');
  }

  changeProfileImage()
  {
    console.log("Image");
  }

}

问题是我使用输入字段的上传图像没有正确的img标记路径。

我还没有在我的项目中安装文件和文件传输Cordova插件。

任何帮助深表感谢。

Answer 1

您可以在change标签上使用input事件来将图像加载到img标签。

TS

export class UpdateimagePage {

  selectedImage: any;
  imageUrl: any;

  constructor() {}

  onImageSelected(event) {

    this.selectedImage = event.target.files[0];
    let reader = new FileReader();

    reader.onload = (e: any) => {
      this.imageUrl = e.target.result;
    };
    reader.readAsDataURL(this.selectedImage);
  }
}

HTML

  <img src="{{imageUrl}}" width="150" style="margin-bottom: 22px;"/>
  <form [formGroup]="updateprofileimg" (ngSubmit)="changeProfileImage()">
    <ion-list>
      <ion-item class="newitem2">
        <ion-input placeholder="Upload Image" type="file" (change)="onImageSelected($event)" [(ngModel)]="img_upload" formControlName="img_upload" required></ion-input>
      </ion-item>
    </ion-list>
  </form>

StackBlitz Demo

有一点需要考虑。在string中使用img_upload作为FormBuilder是不正确的。实际上它不是string，它是blob。您可以使用rest API将此图像上传到服务器，然后您需要使用FormData将图像上传到服务器。我认为这对你继续工作很有帮助。