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

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

通过表单上传的“我的图像”在Ionic中的路径不正确

1 个答案: