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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP递归的三种常用方式
2019/02/28 PHP
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
vue cli 全面解析
2018/02/28 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Python 文件重命名工具代码
2009/07/26 Python
python web框架学习笔记
2016/05/03 Python
python中set()函数简介及实例解析
2018/01/09 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python入门之基础语法学习笔记
2020/02/08 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
《掌声》教学反思
2014/02/23 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
计算机实训报告范文
2014/11/05 职场文书
委托书的样本
2015/01/28 职场文书
大班上学期个人总结
2015/02/13 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript
Python如何将list中的string转换为int
2022/07/15 Ruby