使用REST API的Ionic 3图像上传表单

时间:2017-12-20 17:48:49

标签: angular typescript ionic3

我正在尝试将包含图像的表单上传到服务器。所有表单数据都已正确上载,但图像未以正确的格式上载到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);
        });
    }

0 个答案:

没有答案