ionic html5 上传图片,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';

2caa41467d1766b5c00ac6a8afb49c90.png

html添加控件

上传图片

编辑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) => {

});

}

}

最终效果

5b108f0d27a2bdc134321edfac8d72b2.gif

总结

以上所述是小编给大家介绍的ionic4+angular7+cordova上传图片功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/539330.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HDFS体系结构

Namenode 是整个文件系统的管理节点。它维护着整个文件系统的文件目录树,文件/目录的元信息metadate和每个文件对应的数据块列表。 功能:接收用户的操作请求。 metadate信息包括: 1、文件的owership和permission。 2、文件包含哪些block块…

为什么要将html页面和样式表分离,0031 如何使用css文件对网页内容和样式进行分离...

原标题:0031 如何使用css文件对网页内容和样式进行分离上节课,学习了针对文字可以设置很多种样式。这节课,学习如何将内容和样式进行分离。上节课的课后练习1.将斜体字体效果去除2.将工作经历和工作经验(部分)这2行文字也做成简介这行文字的效…

redis 关系数据库怎么转换 和_redis数据库设计(转)

阅读目录redis是什么redis就是一个存储key-value键值对的仓库,如何使用redis在于如何理解你需要设计的系统的E-R的模型,然后合理的规划redis的数据库结构场景我举一个简单的消息系统的例子,业务需求:服务器端发送消息给用户E-R模型…

Hadoop Archives

介绍 时间: Hadoop Archives (HAR files)是在0.18.0版本中引入的。 作用: 将hdfs里的小文件打包成一个文件,相当于windows的zip,rar。Linux的 tar等压缩文件。把多个文件打包一个文件。 意义: 它的出现就是为了缓…

js 判断日期时间差

2019独角兽企业重金招聘Python工程师标准>>> alert(GetDateDiff("2018-02-27 19:20:22","2018-02-27 09:20:22","hour"));function GetDateDiff(startTime, endTime, diffType) {//将xxxx-xx-xx的时间格式,转换为 xxxx/xx…

python 图形_Python图形数据

CSGraph代表 压缩稀疏图 ,它着重于基于稀疏矩阵表示的快速图算法。 图表表示 首先,让我们了解一个稀疏图是什么以及它在图表示中的作用。 什么是稀疏图? 图形只是节点的集合,它们之间有链接。图表几乎可以代表任何事物 - 社交网络…

本地运行hadoop-Failed to locate the winutils binary in the hadoop binary path

转自:http://www.cnblogs.com/zq-inlook/p/4386216.html 之前在mac上调试hadoop程序(mac之前配置过hadoop环境)一直都是正常的。因为工作需要,需要在windows上先调试该程序,然后再转到linux下。程序运行的过程中&#…

dubbo 支持服务降级吗_dubbo面试题!会这些,说明你真正看懂了dubbo源码

整理了一些dubbo可能会被面试的面试题,感觉非常不错。如果你基本能回答说明你看懂了dubbo源码,对dubbo了解的足够全面。你可以尝试看能不能回答下。我们一起看下有哪些问题吧?dubbo中"读接口"和"写接口"有什么区别?谈谈…

不满足于汽车制造,丰田展示仿钢铁侠机器支撑腿架

而汽车制造商开发机器人也不是丰田一家的专利,此前现代也推出过类似的支撑机器人腿架 大多数人对于丰田的印象都停留在汽车制造上,不过他们却不仅仅满足于汽车事业的发展,最近,丰田正在研发一款机器人支撑腿架,来帮助…

js html异步加载的属性,异步加载JS的五种方式

方案一:点评:HTML5中新增的属性,Chrome、FF、IE9&IE9均支持(IE6~8不支持)。此外,这种方法不能保证脚本按顺序执行。方案二:点评:兼容所有浏览器。此外,这种方法可以确保所有设置defer属性的…

python中各操作符的优先级_Python3练习题系列(06)——各种符号总结

Python3中的各种符号总结 1关键字 import keyword print(keyword.kwlist, end\t) [False, None, True, and, as, assert, break, class, continue, def, del, elif, else, except, finally, for, from, global, if, import, in, is, lambda, nonlocal, not, or, pass, raise, r…

hdfs java读写hdfs demo

windows环境配置: 1.下载winutils的windows版本 GitHub上,有人提供了winutils的windows的版本, 项目地址是:https://github.com/srccodes/hadoop-common-2.2.0-bin,直接下载此项目的zip包,下载后是文件名是hadoop-comm…

cesium 经纬度绘制点_NCL绘制2016年1号台风(Nepartak)

begin ncol 6 ;台风参数 nrow 31 ;时次总数 nbin 6 ;已知该该气旋共经历了6个等级的演变 ;读入台风资料 data asciiread("NEPARTAK.txt",(/nrow,ncol/),"integer") ;/31,6/ 31行6列,integer整数类型 ;;数据读取函数总结&…

VR究竟多奇幻?eSmart邀你共赴一场VR奇幻之旅!

今年夏天,快来参加首届eSmart展会,来一场VR游戏的奇妙之旅,见识最好玩、最有趣的VR游戏! 正如十几年前互联网的兴起开创了全新时代一样,VR产业在近两年也势不可挡。随着一重行业巨头的进入,2016年&#xf…

HTML5新的解析顺序,HTML5新表单新功能解析

HTML5新增了很多属性功能。但是有兼容性问题,因为这些表单功能新增的。我这里做了一个简单的练习,方便参考。如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断。HTML5表单新功能解析#da{width:350px;height:600px;margin:0 au…

python子类继承父类属性实例_Python实现子类调用父类的初始化实例

前言 python中进行面向对象编程,当在子类的实例中调用父类的属性时,由于子类的__init__方法重写了父类的__init__方法,如果在子类中这些属性未经过初始化,使用时就会出错。 例如以下的代码: class A(object): def __init__(self):…

hadoop 回收站Trash

介绍: Hadoop回收站trash,默认是关闭的。 和Linux系统的回收站设计一样,HDFS会为每一个用户创建一个回收站目录:/user/用户名/.Trash/,每一个被用户通过Shell删除的文件/目录,在系统回收站中都一个周期&…

opencv画框返回坐标 python_[python]依靠pynput和pyautogui替换ahk

autohotkey当然是不错的工具,但是这个东西的社群一直发展的不行。从开始学习python以后,我就不时会希望能找到别的工具替代ahk。Python的众多包里面确实是有对应的工具的:模拟鼠标和键盘的操作可以用pyautogui,而捕捉热键则可以使…

Hadoop SequenceFile

apache原文:http://hadoop.apache.org/docs/r1.0.4/api/org/apache/hadoop/io/SequenceFile.html 概念: SequenceFile是一个由二进制序列化过的key/value的字节流组成的文本存储文件,它可以在map/reduce过程中的input/output 的format时被使…

机器学习算法平台alink_Alink漫谈(十二) :在线学习算法FTRL 之 整体设计

Alink漫谈(十二) :在线学习算法FTRL 之 整体设计[Toc]0x00 摘要Alink 是阿里巴巴基于实时计算引擎 Flink 研发的新一代机器学习算法平台,是业界首个同时支持批式算法、流式算法的机器学习平台。本文和下文将介绍在线学习算法FTRL在Alink中是如何实现的&a…