我正在尝试将包含图像的表单上传到服务器。所有表单数据都已正确上载,但图像未以正确的格式上载到MySQL DB,因此会显示空白图像。任何帮助表示赞赏。我真的被困在这里了。
以下是我的.html文件:
<ion-content padding class="my-page">
<ion-item>
<ion-label stacked>Enter Title </ion-label>
<ion-input [(ngModel)]="regData.title" name="title" type="text"></ion-input>
</ion-item>
<button ion-button color="secondary" (click)="getImage()">Select Image</button>
<ion-input [(ngModel)]="regData.img" name="img" type="text" [readonly]="true" value="{{imgurl}}"></ion-input>
<ion-item>
<ion-label stacked>Enter Description</ion-label>
<ion-textarea [(ngModel)]="regData.description" name="description" type="text" rows="3"></ion-textarea>
</ion-item>
<button ion-button block (click)="addPost()"> Add Data </button>
</ion-content>
以下是我的.ts文件:
import {
Camera,
CameraOptions
} from "@ionic-native/camera";
import {
FileTransfer,
FileUploadOptions,
FileTransferObject
} from '@ionic-native/file-transfer';
export class Addnews {
imgurl: any;
regData = {
title: '',
img: '',
description: ''
};
constructor(private transfer: FileTransfer, private camera: Camera) {}
getImage() {
const options: CameraOptions = {
quality: 100,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
}
this.camera.getPicture(options).then((imageData) => {
this.imgurl = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
console.log(err);
this.presentToastImg(err);
});
}
addPost() {
this.showLoader();
this.adddataApiProvider.adddata(this.regData).then((result) => {
this.loading.dismiss();
this.successToast();
}, (err) => {
this.loading.dismiss();
this.presentToast(err);
});
}