前言

ionic是一個(gè)垮平臺開發(fā)框架，可通過web技術(shù)開發(fā)出多平臺的應(yīng)用。但只建議開發(fā)簡單應(yīng)用。復(fù)雜的應(yīng)用需要用到許多cordova插件，而cordova插件的更新或者移動平臺的更新很可能導(dǎo)致插件的不可用，維護(hù)升級成本較高。

安裝插件

安裝插件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添加控件

上傳圖片

編輯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) => {

});

}

}

最終效果

總結(jié)

以上所述是小編給大家介紹的ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

總結(jié)

以上是生活随笔為你收集整理的ionic html5 上传图片,ionic4+angular7+cordova上传图片功能的实例代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。