如何用ionic4 angular7 cordova实现上传图片功能？

本文共计434个文字，预计阅读时间需要2分钟。

前言：Ionic是一个跨平台开发框架，可通过Web技术开发出多平台的移动应用。但建议仅开发简单应用。复杂的应用需要使用到Cordova插件，而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) => { 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, 'imgbb.com', options) .then((data) => { alert('success'); }) .catch((e) => { }); } }

最终效果

总结

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