打包之后,安卓机可以正常的拍摄(或从图片库选择),但选择(或拍照)之后页面不能预览图片。

来源: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’

/**

declare var cordova: any; //导入第三方的库定义到 TS 项目中

@Component({
selector: ‘page-updateavatar’,
templateUrl: ‘updateavatar.html’,
})
export class UpdateAvatarPage extends BaseUI {

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

楼主解决了吗?

0
0

慕码人8953351

2018-11-27

//img.mukewang.com/szimg/5bfca01900014b2e09540278.jpg浏览图片时报这个错误

0
0

浮动的神马

2018-09-15

你好 我也是同样的问题 卡了3个礼拜了   解决了否

0
0

Parry

2018-09-08

你上传后将路径 console.log 出来看看正常吗?

0
1
慕码人8953351
我的也是
2018-11-27
共1条回复

快速上手Ionic3多平台开发企业级问答社区

新手可学,独立开发跨iOS/Android/微信平台项目

613 学习 · 750 问题

查看课程