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 ...
随机推荐
- 寒假day25
今天解决了部分数据爬取不下来的问题,同时进行了面试的准备
- [XNUCA2019Qualifier]EasyPHP
0x00 知识点 预期解中知识点: htaccess生效 如果尝试上传htaccess文件会发现出现响应500的问题,因为文件尾有Just one chance 这里采用# \的方式将换行符转义成普通 ...
- faster rcnn报错:TypeError: slice indices must be integers or None or have an __index__ method
https://blog.csdn.net/qq_27637315/article/details/78849756 https://blog.csdn.net/qq_21089969/article ...
- openstack trove 数据库镜像构建列表
文件位置:/trove/integration/scripts/files/elements ubuntu@ubuntu:~/Downloads/trove/integration/scripts/f ...
- NRF24L01多对一、多通道通讯关键代码
要想24L01多通道通讯成功,务必先单通道调试成功,并且懂得这块芯片通讯的一些基本知识. 一.基本的通讯条件 1.接收端的接收地址(RX_ADDR_Px)等于发射端的发射送地址(TX_ADDR) ...
- Arduino学习——Arduino main 函数
在Arduino IDE的安装目录下可以找到main.cpp这个代码模板文件,main函数就位于此. 文件位置:{Arduino安装目录}\hardware\arduino\avr\cores\ard ...
- UVALive 3942 字典树+dp
其实主要是想学一下字典树的写法,但这个题目又涉及到了DP:这个题目要求某些单词组成一个长子串的各种组合总数,数据量大,单纯枚举复杂度高,首先肯定是要把各个单词给建成字典树,但是之后该怎么推一时没想到. ...
- IDEA抽取方法的快捷键
正常的话是 ctrl+alt+m 如果快捷键占用或者修改过,在写代码的地方右键->refactor->extract->method
- Vue 集成环信 全局封装环信WebSDK 可直接使用
2019-11-25更新 npm install --save easemob-websdk请直接使用官方安装方式即可.import WebIM from 'easemob-websdk' 以下是最开 ...
- CMake变量(提供信息的变量)
目录 CMAKE_VERSION CMAKE_MAJOR_VERSION CMAKE_MINOR_VERSION CMAKE_PATCH_VERSION CMAKE_TWEAK_VERSION CMA ...