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


Posted in Javascript onJune 19, 2019

前言

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';

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

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上传图片功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
使用Cargo工具高效创建Rust项目
Aug 14 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 #Javascript
JavaScript箭头函数中的this详解
Jun 19 #Javascript
基于Node.js的大文件分片上传示例
Jun 19 #Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 #Javascript
了解Javascript中函数作为对象的魅力
Jun 19 #Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 #Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
You might like
浅谈本地WAMP环境的搭建
2015/05/13 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
jQuery设计思想
2017/03/07 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
python 装饰器的使用示例
2020/10/10 Python
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
Ruby如何定义一个类
2012/10/08 面试题
2014年员工工作总结范文
2014/11/18 职场文书
学生检讨书范文
2015/01/27 职场文书
幸福来敲门观后感
2015/06/04 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang