ionic3 打开相机与相册,并实现图片上传
安装依赖项等:
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera
创建ImgUploadProvider服务
import { Injectable } from "@angular/core";
import { ActionSheetController } from "ionic-angular";
import 'rxjs/add/operator/map';
import { Camera,CameraOptions} from "@ionic-native/camera";
import { ImagePicker ,ImagePickerOptions} from "@ionic-native/image-picker";
import { AlertController } from "ionic-angular";
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer'; @Injectable()
export class ImgUploadProvider {
avatar: string = "";
constructor(
private camera: Camera,
private alertCtrl:AlertController,
public actionSheetCtrl: ActionSheetController,
public imagePicker: ImagePicker,
private fileTransfer: FileTransfer,
){ }
upload(filePath,uploadUrl) {
let options: FileUploadOptions = {
fileKey: 'image',
fileName: 'name.jpg',
headers: {
api_token:"HBAPI@20180608jiangbei"
}
// .....
};
const fileTransfer: FileTransferObject = this.fileTransfer.create();
return fileTransfer.upload(filePath, uploadUrl, options)
.then((data) => {
let alert =this.alertCtrl.create({
title:'上传成功!',
message:JSON.stringify(data),
buttons: ['确定'],
});
alert.present();
return data;
}, (err) => {
let alert =this.alertCtrl.create({
title:'上传失败!',
message:JSON.stringify(err),
buttons: ['确定'],
});
alert.present();
})
}
presentActionSheet() {
return new Promise((resolve,reject)=>{
let actionSheet = this.actionSheetCtrl.create({
buttons: [{
text: '拍照',
role: 'takePhoto',
handler: () => {
resolve('takePhoto');
}
}, {
text: '从相册选择',
role: 'chooseFromAlbum',
handler: () => {
resolve('chooseFromAlbum');
}
}, {
text: '取消',
role: 'cancel',
handler: () => {
console.log("cancel");
}
}]
});
actionSheet.present().then(value => {
return value;
});
})
}
chooseFromAlbum() {
const options: ImagePickerOptions = {
maximumImagesCount: ,
quality:
// width: 200,
// height: 200
};
return this.imagePicker.getPictures(options).then(images => {
if (images.length > ) {
this.presentAlert();
} else if (images.length === ) {
this.avatar = images[].slice();
// alert('Image URI: ' + images[0]);
return this.avatar;
}
}, error => {
console.log('Error: ' + error);
});
}
takePhoto() {
const options: CameraOptions = {
quality: ,
allowEdit: true,
// targetWidth: 200,
// targetHeight: 200,
saveToPhotoAlbum: true,
};
return this.camera.getPicture(options).then(image => {
// console.log('Image URI: ' + image);
this.avatar = image.slice();
return this.avatar;
}, error => {
console.log('Error: ' + error);
});
}
presentAlert() {
let alert = this.alertCtrl.create({title: "上传失败", message: "只能选择一张图片作为头像哦", buttons: ["确定"]});
alert.present().then(value => {
return value;
});
}
}
在页面注入ImgUploadProvider服务:
import { ImgUploadProvider } from "../../providers/img-upload/img-upload"; // private imgUploadProvider:ImgUploadProvider,
调用:
private presentActionSheet(){
this.imgUploadProvider.presentActionSheet().then((res)=>{
if(res==="takePhoto"){
this.imgUploadProvider.takePhoto().then((res)=>{
this.avatar=res;
this.imgUploadProvider.
upload(res,this.service.BaseUrl+"/file/imageupload?api_token=your token")
.then((data:any)=>{
this.avatar=data.response.data[];
})
});
}else if(res==="chooseFromAlbum"){
this.imgUploadProvider.chooseFromAlbum().then((res)=>{
this.avatar=res;
this.imgUploadProvider.upload(res,this.service.BaseUrl+"/file/imageupload?api_token=your token")
.then((data:any)=>{
this.avatar=data.response.data[];
})
// alert(res);
});
}
});
}
ionic3 打开相机与相册,并实现图片上传的更多相关文章
- ios中摄像头/相册获取图片压缩图片上传服务器方法总结
本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下. 这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...
- mui + H5 调取摄像头和相册 实现图片上传
最近要用MUI做项目,在研究图片上传时 ,遇到了大坑 ,网上搜集各种资料,最终写了一个demo,直接看代码.参考(http://www.cnblogs.com/richerdyoung/p/66123 ...
- iOS图片上传1
这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问题,在这里总结一下. [部分知识] iphone中图像通常存储在4个地方[相册.应用程序包.沙盒.Internet], ...
- [转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
本文转自:http://blog.csdn.net/qq_31383345/article/details/53014610 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: ...
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="choose ...
- Hbuilder mui 相册拍照图片上传
http://www.bcty365.com/content-146-3648-1.html 使用流程 弹出actionSheet /*点击头像触发*/ document.getElementById ...
- php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子
相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子包括五个部分: 一.相册首页 <html> <head> <meta charset="utf- ...
- HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...
- 微信JS图片上传与下载功能--微信JS系列文章(三)
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
随机推荐
- 读《软件需求最佳实践》YOUGAN
这几天在看<软件需求最佳实践>作者徐锋老师的软件需求培训,三天的课程,虽然原来对需求也关注了很多,自己也做过需求分析和开发的工作,但是这次培训感觉收获还是很多.三天的培训先做个记录,后续多 ...
- Caused by: com.mysql.cj.exceptions.DataReadException: Zero date value prohibited
原因:数据库日期出现零值,即0000-00-00 属于一个无效日期. 解决方案:重新赋值,或者在jdbc链接后加参数zeroDateTimeBehavior=convertToNull
- JavaWeb之监听器
1. 介绍 监听器是一个专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象,当被监视的对象发生情况时,立即采取相应的行动.监听器其实就是一个实现特定接口的普通java程 ...
- Mybatis实现增删改查(二)
1. 准备 请先完成Mybatis基本配置(一)的基本内容 2. 查询多条商品信息 1)在com.mybatis.dao.PartDao中增加接口函数 public List<PartInfo& ...
- 51nod 1284:2 3 5 7的倍数 容斥原理
1284 2 3 5 7的倍数 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 给出一个数N,求1至N中,有多少个数不是2 3 5 7的倍数. 例如N ...
- Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...
- C++逐行读取txt
C++读取txt文件的时候可以使用std::ifstream来实现,如果打开文件失败的话,其变量会是空的,所以可以用来判断是否打开成功. #include <stdlib.h> #in ...
- java 继承条件下的构造方法调用
运行 TestInherits.java示例,观察输出,注意总结父类与子类之间构造方法的调用关系修改Parent构造方法的代码,显式调用GrandParent的另一个构造函数,注意这句调用代码是否是第 ...
- 干货|CVE-2019-11043: PHP-FPM在Nginx特定配置下任意代码执行漏洞分析
近期,国外安全研究员Andrew Danau,在参加夺旗赛(CTF: Capture the Flag)期间,偶然发现php-fpm组件处理特定请求时存在缺陷:在特定Nginx配置下,特定构造的请求会 ...
- No module named cv2 报错处理
运行python脚本出现“No module named cv2 ”,这时我们安装下opencv-python依赖即可 python3 -m pip install opencv-python