ionic-framework - 如何在 Ionic 中将 base64 字符串转换为 JPG 或 Png
问题描述
我正在使用 Ionic 应用程序,并且正在使用 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 url。
任何帮助深表感谢。
解决方案
试试这个:
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);
}
});
}
});
}
这解决了我的问题。
推荐阅读
- google-sheets-api - 在给定工作表 ID 但没有工作表标题的情况下,如何仅使用电子表格.get 获得填充行?
- r - lsmeans 模型中的参数无效?
- javascript - 模态没有隐藏在 ipad 中
- typescript - 为什么打字稿不能正确创建对象?
- python - Django - 为用户指定的未知字段(组)
- css - 提升样式表中所有元素的优先级
- c++ - 为什么在 C 中允许对 int * arr[] 进行以下赋值?
- swift - 在拆分视图控制器的导航栏中删除 1px 行
- node.js - NodeJs SDK 中的 Couchbase 子文档更新
- c++ - 如何方便地强制 CMAKE 使用特定版本的静态库文件?