这篇文章将为大家详细讲解有关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) => { 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如何实现上传图片功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。