ionic4+angular7+cordova上傳圖片功能的實例代碼

2019-11-19 11:18:41

字體：大中小

來源：轉載

供稿：網友

前言

ionic是一個垮平臺開發框架，可通過web技術開發出多平臺的應用。但只建議開發簡單應用。復雜的應用需要用到許多cordova插件，而cordova插件的更新或者移動平臺的更新很可能導致插件的不可用，維護升級成本較高。

安裝插件

安裝插件Image Picker

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

安裝插件File Transfer

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

添加到app.module.ts

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

html添加控件

<ion-button (click)="chooseImage()">上傳圖片</ion-button>

編輯ts文件

export class UploadPage {  constructor(    private imagePicker: ImagePicker,    private transfer: FileTransfer  ) {  }  // 選擇圖片，選擇完成立即上傳  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) {        this.upload(res);      }    }, (err) => {    });  }  // 上傳文件  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, 'https://imgbb.com', options)      .then((data) => {        alert('success');      })      .catch((e) => {      });  }}

最終效果