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

ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。这篇文章主要介绍了ionic4+angular7+cordova上传图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

前言

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) =&gt; { for (const res of results) { this.upload(res); } }, (err) =&gt; { }); } // 上传文件 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) =&gt; { alert('success'); }) .catch((e) =&gt; { }); } }

最终效果

总结

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

您可能感兴趣的文章: