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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
js获取 type=radio 值的方法
May 09 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
php中的三元运算符使用说明
2011/07/03 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
初步了解javascript面向对象
2015/11/09 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
python实现在目录中查找指定文件的方法
2014/11/11 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
用python绘制樱花树
2020/10/09 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
Python识别处理照片中的条形码
2020/11/16 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
初婚未育未抱养证明
2014/01/12 职场文书
教师对学生的寄语
2014/04/03 职场文书
高中学校对照检查材料
2014/08/31 职场文书
委托书的写法
2014/09/16 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
男生贾里读书笔记
2015/06/30 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书