Ionic3学习笔记(十六)上传头像至图床
本文为原创文章,转载请标明出处
个人做的开源 Demo 登录注册模块采用的是 Wilddog 野狗通讯云的身份认证服务,不得不说各方面和 Google 收购的 Firebase 很像,十分简单易用。其中 User
有个 photoURL
字段是用来存放用户头像 URL 的,所以寻思着找了个免费的第三方图床(SM.MS)来存放用户头像。
用到的 Cordova 插件是 Camera 和 File Transfer,分别用来拍照、相册选择和上传图片,Cordova 插件的安装、导入、使用我就不赘述了,文档里都有,so 直接上关键代码。
getPictureAndUpload(sourceType: number) {
const cameraOptions: CameraOptions = {
quality: 80,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: sourceType,
allowEdit: true,
encodingType: this.camera.EncodingType.JPEG,
targetWidth: 200,
targetHeight: 200,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
saveToPhotoAlbum: true,
cameraDirection: this.camera.Direction.BACK
};
this.camera.getPicture(cameraOptions).then(image => {
this.onUploadPicture(image);
}, error => {
console.log(error);
});
}
onUploadPicture(fileURI: string) {
const fileTransferObject: FileTransferObject = this.fileTransfer.create();
const fileUploadOptions: FileUploadOptions = {
fileKey: 'file',
fileName: 'avatar.jpg',
httpMethod: 'POST',
mimeType: 'image/jpeg',
params: {},
chunkedMode: true,
headers: {'Content-Type': 'multipart/form-data'}
};
let url: string = 'https://sm.ms/api/upload?smfile=' + fileURI;
fileTransferObject.upload(fileURI, url, fileUploadOptions).then(data => {
console.log(data["response"]);
wilddog.auth().onAuthStateChanged(user => {
user.updateProfile({'photoURL': JSON.parse(data["response"])["data"]["url"]}).then(() => {
this.getUserData();
}, error => {
this.presentToast(error.name + ': ' + error.message);
});
});
}, error => {
console.log(error);
});
}
presentChangeAvatarActionSheet() {
let changeAvatarActionSheet = this.actionSheetCtrl.create({
title: '更换头像', buttons: [{
text: '相册', handler: () => {
this.getPictureAndUpload(this.camera.PictureSourceType.PHOTOLIBRARY);
}
}, {
text: '拍照', handler: () => {
this.getPictureAndUpload(this.camera.PictureSourceType.CAMERA);
}
}, {text: '取消', role: 'cancel'}]
});
changeAvatarActionSheet.present().then(value => {
return value;
});
}
}
如有不当之处,请予指正,谢谢~
Ionic3学习笔记(十六)上传头像至图床的更多相关文章
- python3.4学习笔记(十六) windows下面安装easy_install和pip教程
python3.4学习笔记(十六) windows下面安装easy_install和pip教程 easy_install和pip都是用来下载安装Python一个公共资源库PyPI的相关资源包的 首先安 ...
- SpringMVC:学习笔记(8)——文件上传
SpringMVC--文件上传 说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. ...
- Django:学习笔记(8)——文件上传
Django:学习笔记(8)——文件上传 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不 ...
- Javaweb学习笔记10—文件上传与下载
今天来讲javaweb的第10阶段学习.文件的上传与下载,今天主要说的是这个功能的实现,不用说了,听名字就是外行人也知道肯定很重要啦. 老规矩,首先先用一张思维导图来展现今天的博客内容. ...
- 文件的上传Commons FileUpload(web基础学习笔记十六)
一.表单设置 <form action="<%=request.getContextPath()%>/jsp/admin/doAdd.jsp" enctype=& ...
- springmvc学习笔记--支持文件上传和阿里云OSS API简介
前言: Web开发中图片上传的功能很常见, 本篇博客来讲述下springmvc如何实现图片上传的功能. 主要讲述依赖包引入, 配置项, 本地存储和云存储方案(阿里云的OSS服务). 铺垫: 文件上传是 ...
- (C/C++学习笔记) 十六. 预处理
十六. 预处理 ● 关键字typeof 作用: 为一个已有的数据类型起一个或多个别名(alias), 从而增加了代码的可读性. typedef known_type_name new_type_nam ...
- Python脚本控制的WebDriver 常用操作 <二十六> 上传文件
测试用例场景 上传文件的方法是找到上传文件的对象,通常是的对象.然后直接往这个对象send_keys,传入需要上传文件的正确路径.绝对路径和相对路径都可以,但是上传的文件必须存在,否则会报错. Pyt ...
- Struts2学习笔记(十一)——文件上传
1.单文件上传 单文件上传步骤: 1)创建上传jsp页面 文件上传的表单提交方式必须是POST方式,编码类型:enctype="multipart/form-data",默认是 a ...
随机推荐
- 201403-2 窗口 Java
要想到定义一个窗口类,判断点在不在矩形里好判断 需要一个数组,存放结果 import java.util.ArrayList; import java.util.List; import java.u ...
- 01 语言基础+高级:1-8 File类与IO流_day09【字节流、字符流】
day09[字节流.字符流] 主要内容 IO流 字节流 字符流 异常处理 Properties 教学目标 能够说出IO流的分类和功能 能够使用字节输出流写出数据到文件 能够使用字节输入流读取数据到程序 ...
- PAT甲级——1146 Topological Order (25分)
This is a problem given in the Graduate Entrance Exam in 2018: Which of the following is NOT a topol ...
- OracleXE 11g user莫名过期
参考大大的 环境sqlplus 1.sysdba登陆 SQL>conn sys as sysdba password 2.查看用户状态 SQL>select username,accoun ...
- JavaSE--压缩
package util; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java ...
- 启动outlook时报错:mapi无法加载信息服务msncon.dll
今天这个Office2010 outlook搞的让人蛋疼,老是说启动outlook时报错:mapi无法加载信息服务msncon.dll. 百度了一下,如下解决方案: 安装路径为D:\NEW Windo ...
- mysql 数据库保存\n 微信分享时不能换行
主要因为保存的是\n 但是查询出来是\\n 所以需要把\\n替换为\n即可(不转换的话不会换行并且显示\n)
- 使用OkHttp上传图片到服务器
Okhttp上传图片方法,就像网页那样,使用Form的Post. 首先创建requestBody,然后Builder构建Query:最后Response返回服务器请求,最后把response.body ...
- 给创业公司CEO的临别赠言
一别两宽,各生欢喜 2018年2月8日,我在这个公司的最后一天,三年半. 还记得2014年,在三里屯SOHO的某个咖啡厅中,你自信飞扬的脸和眼睛里暗夜星辰般的闪亮的希冀让我久久无法平静.终于在某一个耀 ...
- 48)PHP,工厂模式
为啥需要工厂模式啊: (原来是生产类的工具——————————) 工厂类的代码格式: <?php class factory{ //Instance表示“实例”,“对象” static func ...