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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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
Syphon 使用方法
2021/03/03 冲泡冲煮
用Zend Encode编写开发PHP程序
2010/02/21 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
python 网络爬虫初级实现代码
2016/02/27 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python实现Floyd算法
2018/01/03 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
python自动点赞功能的实现思路
2020/02/26 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
JAVA程序员自荐书
2014/01/30 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
共青团员自我评价范文
2014/09/14 职场文书
实习单位推荐信
2015/03/27 职场文书
2015年仓库工作总结
2015/04/09 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
Java 在生活中的 10 大应用
2021/11/02 Java/Android
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers