ionic4+angular7+cordova上传图片功能的实例代码

前言ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。但只建议开发简单应

前言

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) => {
 });
 }
}

最终效果

总结

以上所述是小编给大家介绍的ionic4+angular7+cordova上传图片功能的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

ionic4 angular7 cordova 上传图片