前言
由于项目中涉及到用户上传修改头像,所以研究一下Ionic中上传图片的实现。
正文
由于代码中注释很详细,直接贴代码和注释
HTML代码:
<!-- 下拉刷新加载 --> <ion-content no-margin> <ion-refresher (ionRefresh)="pullDown($event)"> <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="{{Refresh}}" refreshingSpinner="circles" refreshingText="{{Refresh}}"> </ion-refresher-content> </ion-refresher> <!-- 显示图片,若没有图片则显示请从图库中选择一张图片 --> <img src="{{pathForImage(lastImage)}}" style="width:100%;" [hidden]="lastImage === null" /> <h3>请从图库中选择一张图片</h3> </ion-content> <ion-footer> <ion-toolbar color="primary"> <ion-buttons> <button ion-button icon-left (click)="presentActionSheet()"> <ion-icon name="camera"></ion-icon>选择... </button> <!-- 如果没有选择图片,上传按钮为不可用状态 --> <button ion-button icon-left (click)="uploadImage()" [disabled]="lastImage === null"> <ion-icon name="cloud-upload"></ion-icon>上传 </button> </ion-buttons> </ion-toolbar> </ion-footer>
.ts代码
import { Component } from '@angular/core';
//判断是哪个平台打开的导入Platform
import { IonicPage, normalizeURL, NavController, NavParams, ActionSheetController, ToastController, ModalController, LoadingController, Platform, Loading, ViewController } from 'ionic-angular';
// 导入四个外部加载进来的组件
import { File } from "@ionic-native/file";
import { Transfer, TransferObject } from "@ionic-native/transfer";
import { FilePath } from "@ionic-native/file-path";
import { Camera } from "@ionic-native/camera";
import { BaseUI } from '../../../../common/baseui';
declare var cordova: any; //导入第三方的库定义到TS项目中
// @IonicPage()
@Component({
selector: 'page-headface',
templateUrl: 'headface.html',
})
export class HeadfacePage extends BaseUI {
userId: string;
errorMessage: string;
lastImage: string = null;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public modalCtrl: ModalController,
public loadingCtrl: LoadingController,
public actionSheetCtrl: ActionSheetController,
public camera: Camera,
public transfer: Transfer,
public file: File,
public filePath: FilePath,
public platform: Platform,
public toastCtrl: ToastController,
public viewCtrl: ViewController
) {
super();
}
// ionViewDidEnter(){
// this.shorage.get('UserId').then(val)=>{
// if (val != null) {
// this.userId = val
// }
// }
// }
private Refresh: string;
// 下拉刷新
pullDown(goback) {
this.Refresh = "这里不是入口";
goback.complete();
}
presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: '选择图片',
buttons: [
{
text: '从图库中选择',
handler: () => {
this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: '使用相机',
handler: () => {
this.takePicture(this.camera.PictureSourceType.CAMERA);
}
},
{
text: '取消',
role: 'cancel'
}
]
});
actionSheet.present();
}
// 获取图片
takePicture(sourceType) {
// 定义相机的一些参数
var options = {
quality: 100,//图片的质量
sourceType: sourceType,
saveToPhotoAlbum: false, //是否把拍摄的照片保存到相册中
correctOrientation: true,//是否纠正拍摄照片的方向-陀螺仪
};
//获取图片的方法
this.camera.getPicture(options).then((imagePath) => {
//特别处理Android平台的文件路径问题
if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
//获取Android平台下的真实路径
this.filePath.resolveNativePath(imagePath)
.then(filePath => {
//获取正确的路径
let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
//获取正确的文件名
let currentName = imagePath.substr(imagePath.lastIndexof('/') + 1);
this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
});
}
else {
//获取正确的路径
let correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
//获取正确的文件名
let currentName = imagePath.substr(imagePath.lastIndexof('/') + 1);
this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
}
}, (err) => {
super.showToast(this.toastCtrl, "选择图片出现错误,请检查相关权限。");
}
);
}
//将获取到的图片或者相机拍摄的图片进行另存为,用于后期图片的上传使用
copyFileToLocalDir(namePath, currentName, newFileName) {
this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(sucess => {
this.lastImage = newFileName;
}, error => {
super.showToast(this.toastCtrl, "存储图片到本地图库出现错误。");
});
}
//为文件生成一个新的文件名
createFileName() {
var d = new Date(),
n = d.getTime(),
newFileName = n + ",jpg"; //拼接文件名
return newFileName;
}
//处理图片的路径为可以上传的路径
public pathForImage(img) {
if (img === null) {
return '';
}
else {
//https://ionicframework.com/docs/wkwebview/
return normalizeURL(cordova.file.dataDirectory + img);//normalizeURL 重写file路径,适配ios11
}
}
uploadImage() {
var url = '';
var targetPath = this.pathForImage(this.lastImage);
var filename = this.userId + ".jpg" //定义上传后的文件名
//上传的参数
var options = {
fileKey: "file",
fileName: filename,
chunkedMode: false,
mimeType: "multipart/form-data",
params: { 'fileName': filename, 'userid': this.userId }
};
const fileTransfer: TransferObject = this.transfer.create();
var loading = super.showLoading(this.loadingCtrl, "上传中...");
//开始正式上传
fileTransfer.upload(targetPath, url, options).then(data => {
loading.dismiss();
super.showToast(this.toastCtrl, "图片上传成功。");
//用户看清弹窗提示后进行页面的关闭
setTimeout(() => {
this.viewCtrl.dismiss();
}, 3000);
}, err => {
loading.dismiss();
super.showToast(this.toastCtrl, "图片上传发生错误,请重试。");
});
}
}
总结
本博客几乎全是代码,详情参考代码注释