Question

我正在使用Ionic App，并且正在使用Ionic中输入的文件执行更新配置文件图像。

这是我的 updateimage.html ：

<ion-content padding style="text-align: center;">
  <ion-grid align-items-center justify-content-center style="height: 100%;">
    <ion-row align-items-center justify-content-center style="height: 100%;">
      <ion-col align-self-center justify-content-center col-12 col-md-6 col-xl-3 style="text-align: center;">
        <h2 class="myformh2">Update Profile Picture</h2>
        <h4 class="myformh2">Image Preview</h4>
        <img src="{{imageUrl}}" class="newimg22" />
        <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>
            <div>
              <button [disabled]="!updateprofileimg.valid" ion-button type="submit" class="newbtn11" color="primary"
                block>Change Profile Picture</button>
            </div>
          </ion-list>
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

在此html中，当用户上传图像时，我正在显示图像的预览。

这是我的 updateimage.ts ：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { Storage } from '@ionic/storage';

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

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

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

    reader.onload = (e: any) => {
      this.imageUrl = e.target.result;
      this.converted_image = "data:image/jpeg;base64,"+this.imageUrl;
    };
    reader.readAsDataURL(this.selectedImage);
  }

  changeProfileImage()
  {
    const fd = new FormData();
    this.storage.get("ID").then((val) =>
    {
      if(val)
      { 
        fd.append('upic', this.selectedImage, this.selectedImage.name);
        this.restProvider.updateprofileimg(fd , 'update_profilepic/'+val).subscribe((data) => {
          if (data) {
            this.responseEdit = data;
            console.log(this.responseEdit.msg);
          }
        });

      }
    });
  }

}

在这个ts文件中，我正在使用API将上传的图像发送到后端，但是问题是，它正在发送图像的base64网址。

非常感谢您的帮助。

Answer 1

只需尝试一下：

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

    reader.onload = (e: any) => {
      this.imageUrl = e.target.result;
      this.converted_image = "data:image/jpeg;base64,"+this.imageUrl;
    };
    reader.readAsDataURL(this.selectedImage);
  }

  changeProfileImage()
  {
    const fd = new FormData();
    this.storage.get("ID").then((val) =>
    {
      if(val)
      { 
        fd.append('upic', this.selectedImage, this.selectedImage.name);
        fd.append('user_id', val);
        this.restProvider.updateprofileimg(fd , 'update_profilepic/'+val).subscribe((data) => {
          if (data) {
            this.responseEdit = data;
            console.log(this.responseEdit.msg);
          }
        });
      }
    });
  }

这解决了我的问题。

如何在Ionic中将base64字符串转换为JPG或Png

1 个答案: