ionic4+angular7+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';
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) =&gt; {
for (const res of results) {
this.upload(res);
}
}, (err) =&gt; {
});
}
// 上传文件
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) =&gt; {
alert('success');
})
.catch((e) =&gt; {
});
}
}
最终效果
> 作者:垚淼
> 出处:www.ljmin.com
ionic4+angular7+cordova上传图片的更多相关文章
- ionic4+angular7+cordova开发入门
前言 ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用.但只建议开发简单应用.复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不 ...
- 基于ionic4、cordova搭建android开发环境
前颜(yan)最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa. 本文只讲解and ...
- Ionic Cordova 调用原生 Api 实现拍照上传 图片到服务器功能
Ionic 调用 Device 设备 Api 获取手机的设备信息 1. 找到对应的Api: https://ionicframework.com/docs/native/device/ 2. 安装相关 ...
- ionic4+angular6 混合移动开发 capacitor cordova
首先要更新或者安装 ionic cli npm install -g ionic 创建项目 ionic start ionic-angular tabs --type=angular –type=an ...
- ZH奶酪:ionic+angularJS+cordova(FileTransfer)上传图片【移动端】
[功能介绍] 在开发应用的时候,经常会遇到需要上传图片的功能,比如修改个人资料的头像.本文介绍的是基于ionic框架,在移动端上传图片的功能. [功能流程] (1)点击页面上的头像,弹出一个对话框,选 ...
- Ionic4.x、Cordova Android 检测应用版本号、服务器下载文件以及实现App自动升级、安装
Android App 升级执行流程 1.获取本地版本号 2.请求服务器获取服务器版本号 3.本地版本和服务器版本不一致提示升级,弹窗提示用户是否更新 4.用户确定升级,调用文件传输方法下载 apk ...
- Ionic4 Cordova 调用原生硬件 Api 实现扫码功能
QR Scanner 速度快,样式随心所欲,默认只能扫二维码 https://ionicframework.com/docs/native/qr-scanner/ 安装插件 ionic cordova ...
- Ionic4 & Cordova 打包Android,含签名
IOS打包必须在Mac环境,以下讲述安卓打包并签名的过程,若是不签名,那么APP不能在手机上安装. 1.添加对应的android框架 ionic cordova prepare android 1)修 ...
- Cordova+Asp.net Mvc+GIS跨平台移动应用开发实战1-系统初步搭建(附演示,apk,全部源码)
1.前言 身处在移动互联网的今天,移动应用开发炙手可热,身为程序猿的我们怎么能错过开发一款我们自己的APP.本人算是一个基于.net的GIS开发入门者(马上就大四啦), 暑假在学校参加GIS比赛有大把 ...
随机推荐
- 协议的注冊与维护——ndpi源代码分析
在前面的文章中,我们对ndpi中的example做了源代码分析.这一次我们将尽可能深入的了解ndpi内部的结构和运作.我们将带着以下三个目的(问题)去阅读ndpi的源代码. 1.ndpi内部是怎么样注 ...
- nextSibling和previousSibling
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 这样看ACM是不是更好?
如果搞ACM只是为了拿奖,为了保研,这样太功利,整个过程都会变得没意思.我说过我同时看中过程和结果. 其实ACM解题也不是那么没意思,每次AC都有一种非常棒的成就感,每个题目就像是一个解谜游戏,完成了 ...
- mybatis一对多
mapper.xml <mapper namespace="com.oracle.dao.one2manyDao"> <resultMap type=" ...
- LeetCode_3Sum Closest
一.题目 3Sum Closest Total Accepted: 32191 Total Submissions: 119262My Submissions Given an array S of ...
- v-model在其它元素以及类型上的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- UOJ #35. 后缀排序[后缀数组详细整理]
#35. 后缀排序 统计 描述 提交 自定义测试 这是一道模板题. 读入一个长度为 nn 的由小写英文字母组成的字符串,请把这个字符串的所有非空后缀按字典序从小到大排序,然后按顺序输出后缀的第一个字符 ...
- axis、xfire、CXF 、JWS
1.JWS是Java语言对WebService服务的一种实现,用来开发和发布服务.而从服务本身的角度来看JWS服务是没有语言界限的.但是Java语言为Java开发者提供便捷发布和调用WebServic ...
- kafka 和 zookeeper 常用命令记录
启动zookeeper zkServer.sh start 启动kafka服务器 kafka-server-start.sh /software/kafka_2.10-0.10.2.1/config/ ...
- Ubuntu 配置 nfsserver
https://help.ubuntu.com/lts/serverguide/network-file-system.html#nfs-installation 网络文件系统 (NFS) NFS 允 ...