Instance code of ionic4+angular7+cordova uploading image function



Ionic is a broken platform development framework, which can develop multi-platform applications through web technology. But it is only recommended to develop simple applications. Complex applications require many Cordova plug-ins, and updates to Cordova plug-ins or mobile platforms are likely to result in the unavailability of plug-ins and high maintenance and upgrading costs.

Installation plug-in

Install the plug-in Image Picker

$ ionic cordova plugin add cordova-plugin-telerik-imagepicker
$ npm install @ionic-native/image-picker

Install plug-in File Transfer

$ ionic cordova plugin add cordova-plugin-file-transfer
$ npm install @ionic-native/file-transfer

Add to app. module. TS

import { ImagePicker } from '@ionic-native/image-picker/ngx';
import { FileTransfer} from '@ionic-native/file-transfer/ngx';

HTML add control

  < ion-button (click) = "chooseImage ()"> upload pictures </ion-button>

Edit TS file

export class UploadPage {
    private imagePicker: ImagePicker,
    private transfer: FileTransfer
  ) {
  // Select Pictures, Select Complete Upload Immediately
  chooseImage() {
    const options = {
      maximumImagesCount: 1
      // width: int,
      // height: int,
      // quality: int (0-100),
      // outputType: int
    this.imagePicker.getPictures(options).then((results) => {
      for (const res of results) {
    }, (err) => {
  // Upload files
  upload(file) {
    const fileTransfer: FileTransferObject = this.transfer.create();
    const options: FileUploadOptions = {
      fileKey: 'file',
      fileName: timestamp() + '.jpg',
      params: {
        type: 'file',
        action: 'upload',
        timestamp: timestamp(),
        auth_token: '79e1bd1504962034c068461d58b9cd89a1d8a4a1'
      headers: {}
    fileTransfer.upload(file, '', options)
      .then((data) => {
      .catch((e) => {

Final effect


The above is an example code of ionic4 + angular 7 + Cordova uploading picture function introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message for me, Xiaobian will reply to you in time. Thank you very much for your support to developpaer.
If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!

Recommended Today

K8s deploy the Apollo configuration center

Deployment environment 1、mysql root password 123Apollo config internal address 10.43 twenty-two point two two 1、 Create data The Apollo server requires two databases: Apollo PORTALDB and Apollo configdb. We have prepared SQL files for the creation of databases, tables and sample data respectively. We only need to import the database.1. Create Apollo PORTALDBImport through […]