打包之后,安卓机可以正常的拍摄(或从图片库选择),但选择(或拍照)之后页面不能预览图片。
来源:9-8 在不同的系统下测试图片上传的功能

qq_转眼之间_0
2018-09-07
打包之后,安卓机可以正常的拍摄(或从图片库选择),但选择(或拍照)之后页面不能预览图片。但是可以正常的上传和在页面中显示出(只是不能预览)。
另外,设置了拍照比例,但是无效果
import { Component } from ‘@angular/core’;
import { NavController, NavParams, ActionSheetController, LoadingController, ModalController, Platform, ToastController, ViewController, normalizeURL } from ‘ionic-angular’;
import { RestProvider } from ‘…/…/providers/rest/rest’;
import { Storage } from '@ionic/storage’
import { BaseUI } from ‘…/…/common/baseui’
import { File } from '@ionic-native/file’
import { FilePath } from '@ionic-native/file-path’
import { Transfer, TransferObject } from '@ionic-native/transfer’
import { Camera, CameraOptions } from ‘@ionic-native/camera’
/**
- Generated class for the UpdateheadfacePage page.
- See https://ionicframework.com/docs/components/#navigation for more info on
- Ionic pages and navigation.
*/
declare var cordova: any; //导入第三方的库定义到 TS 项目中
@Component({
selector: ‘page-updateavatar’,
templateUrl: ‘updateavatar.html’,
})
export class UpdateAvatarPage extends BaseUI {
userId: string;
errorMessage: string;
lastImg: string = ‘https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1536302517&di=0993208b1a76b5d2d565c2b644e1ff3a&src=http://a3.topitme.com/0/82/57/11302368668ab57820o.jpg’;
constructor(public navCtrl: NavController, public navParams: NavParams,
public actionSheetCtrl: ActionSheetController, public storage: Storage,
public rest: RestProvider, public loadingCtrl: LoadingController,
public modalCtrl: ModalController, public camera: Camera,
public file: File, public filePath: FilePath, public transfer: Transfer,
public platform: Platform, public toastCtrl: ToastController,
public viewCtrl: ViewController) {
super();
}
/**
*上弹选择框
*
- @memberof UpdateAvatarPage
*/
presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: ‘拍照或上传’,
buttons: [
{
text: ‘拍照’,
handler: () => {
this.takePicture(this.camera.PictureSourceType.CAMERA);
}
},
{
text: ‘从图库中选择’,
handler: () => {
this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: ‘取消’,
role: ‘cancel’,
cssClass: ‘danger’,
handler: () => {
console.log(‘Cancel clicked’);
}
}
]
});
actionSheet.present();
}
/**
- 获取图片(拍照或者图片库选择)
- @param {*} sourceType
- @memberof UpdateAvatarPage
*/
takePicture(sourceType) {
// 定义相机参数
var options: CameraOptions = {
quality: 100,
sourceType: sourceType,
saveToPhotoAlbum: true, //是否将拍摄的照片保存到相册
correctOrientation: true, //是否纠正拍射照片的方向
targetWidth: 100,
targetHeight: 100,
}
// 获取图片的方法
this.camera.getPicture(options).then((imagePath) => {
// 特别处理安卓路径
if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
this.filePath.resolveNativePath(imagePath).then(filePath => {
let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
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, '选择图片出现错误,请在 App 中操作或检查相关权限!')
})
}
// 将获取到的图片或拍摄的进行另存为,用于后期图片上传
copyFileToLocalDir(namePath, currentName, newFileName) {
this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
this.lastImg = 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 {
return normalizeURL(cordova.file.dataDirectory + img);
}
}
/**
*上传图片
*
- @memberof UpdateAvatarPage
*/
uploadImage() {
var url = ‘https://imoocqa.gugujiankong.com/api/account/uploadheadface’; //后台定义的
var targetPath = this.pathForImage(this.lastImg);
var filename = this.userId + “.jpg”;
// transfer 上传参数
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();
}, 1500)
}, err => {
loading.dismiss()
super.showToast(this.toastCtrl, "图片上传发送错误,请重试!");
});
}
ionViewDidEnter() {
this.storage.get(“UserId”).then((val) => {
if (val != null) {
this.userId = val;
}
});
}
}
4回答
-
cds1998
2019-02-10
楼主解决了吗?
00 -
慕码人8953351
2018-11-27
浏览图片时报这个错误
00 -
浮动的神马
2018-09-15
你好 我也是同样的问题 卡了3个礼拜了 解决了否
00 -
Parry
2018-09-08
你上传后将路径 console.log 出来看看正常吗?
012018-11-27
相似问题