Ionic отправить несколько значений и файлов на сервер из ионного приложения? - PullRequest
0 голосов
/ 04 октября 2018

Я должен отправить текстовое поле и изображение из моего ионного приложения.

My From ниже:

<form (ngSubmit)="onSubmit()" name="register-form">
    <div class="login-box">
      <ion-row>
        <ion-col>
          <ion-list inset>
            <ion-item>
              <ion-input type="text" placeholder="Sender Name" name="sendername" required [(ngModel)]="sendername"></ion-input>
            </ion-item>

            <ion-item>
              <ion-input type="text" placeholder="Sender Id Name" name="senderidname" required [(ngModel)]="senderidname"></ion-input>
            </ion-item>

        <ion-item>
          <ion-input type="file" placeholder="Sender Id" name="senderid" required [(ngModel)]="senderid"></ion-input>
        </ion-item>

            <ion-item>
              <ion-input type="text" placeholder="Sender Mobile" name="sendermobile" required [(ngModel)]="sendermobile"></ion-input>
            </ion-item>

            <ion-item>
              <ion-input type="text" placeholder="Amount" name="amount" required [(ngModel)]="amount"></ion-input>
            </ion-item>

            <ion-item>
              <ion-input type="text" placeholder="Select Type" name="selecttype" required [(ngModel)]="selecttype"></ion-input>
            </ion-item>

            <ion-item>
              <ion-input type="text" placeholder="Select Purpose" name="selectpurpose" required [(ngModel)]="selectpurpose"></ion-input>
            </ion-item>

          </ion-list>
        </ion-col>
      </ion-row>
    </div>
    <ion-row>
      <ion-col class="signup-col">
        <button ion-button type="submit" class="submit-btn" style="background:#33839a !important">SEND NOW</button>
      </ion-col>
    </ion-row>
  </form>

ts Функция файла:

  onSubmit(){
    const billvalues={
    sendername:this.sendername,
    senderidname:this.senderidname,
    sendermobile:this.sendermobile,
    senderid:this.senderid,
    amount:this.amount,
    type:this.type,
    purpose:this.purpose
    }
  console.log('Here is bill values'+ JSON.stringify(billvalues));
}

Я должен передать значения в бэкэнд-API с помощью Express.Как правильно отправить изображение и отправить на сервер со всеми другими значениями.

1 Ответ

0 голосов
/ 04 октября 2018

Ваша основная задача - загрузить и отправить файл для обслуживания через API.Я просто собираюсь это сделать.

Вы можете использовать плагин: https://ionicframework.com/docs/native/camera/

что вы должны сделать?

добавить это в ваш файл module.ts add

import { Camera, CameraOptions } from '@ionic-native/camera';

добавить камеру для добавления модуля Поставщики

  providers: [
    StatusBar,
    Camera,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

в этом файле, с которым вы работаете, добавьте:

import { Camera, CameraOptions } from '@ionic-native/camera';
import {Observable} from 'rxjs/Observable';

конструктор

  constructor(public navCtrl: NavController, private camera:Camera, public http:HttpClient) {

  }

Функции:

Загрузить после захвата на камеру:

 openCamera(){
        const options: CameraOptions = {
           quality:100,
           destinationType:this.camera.DestinationType.DATA_URL,
           encodingType: this.camera.EncodingType.JPEG,
           mediaType:this.camera.MediaType.PICTURE
        }

        this.camera.getPicture(options).then((imageData)=>{
          this.base64Image = 'data:image/jpeg;base64,'+imageData;
        }
        ,(err)=>{
          console.log(err);
        })
      }

Загрузить из галереи:

  openGallery(){
   const options: CameraOptions = {
     quality:100,
     destinationType:this.camera.DestinationType.DATA_URL,
     encodingType: this.camera.EncodingType.JPEG,
     mediaType:this.camera.MediaType.PICTURE,
     sourceType:this.camera.PictureSourceType.PHOTOLIBRARY
  }

  this.camera.getPicture(options).then((imageData)=>{
    this.base64Image = 'data:image/jpeg;base64,'+imageData;
  }
  ,(err)=>{
    console.log(err);
  })
  }

отправить в API:

 uploadImage(){
           let url = 'localhost:3000/upload';
           let postData = new FormData();
           postData.append('file', this.base64Image);
           let data: Observable<any> = this.http.post(url, postData);
           data.subscribe((result)=>{
             console.log(result);
           })
      }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...