通过表单上传的“我的图像"在Ionic中未采用正确的路径 [英] My Image uploaded through form is not taking correct path in Ionic

问题描述

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

I am working in Ionic app and I have image upload input field and upload button. I want to show the uploaded image as a preview but after uploading the image, it is not taking the image correct path.

错误:

不安全:C:\ fakepath \ 3.jpg网络:: ERR_UNKNOWN_URL_SCHEME

unsafe: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标签中将上传的图像显示为预览，但它显示了错误.

In this I am showing the uploaded image as a preview in the img tag but it is showing the error.

这是我的 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标签的正确路径.

The problem is that my upload image using input field is not coming with the proper path to the img tag.

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

I have also not installed the File and File Transfer Cordova Plugin in my project.

非常感谢您的帮助.

推荐答案

您可以在input标记上使用change事件，将图像加载到img标记.

You can use change event on input tag to load image to img tag.

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演示

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

One thing to consider. Using img_upload as a string in FormBuilder is not correct. Actually it is not a string, it is a blob. You may uploading this image to server using rest API, then you need to use FormData for uploading image to server. I think this will be helpful to you continuing your work.

这篇关于通过表单上传的“我的图像"在Ionic中未采用正确的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！