正文
ionic中调用cordova插件upload上传的问题，拍照and调用相册
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
第一次写博客直接怼代码
首先应该
ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer
添加对象ImagePickerOptions 和 CameraOptions 是因为可以直接的看到错误提示
import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker';
import { Camera, CameraOptions } from '@ionic-native/camera';
// 拍照
public takePhoto() {
let imgData = '';
let base64ImgData = '';
let options: CameraOptions = {
quality: , //相片质量0-100
destinationType: , //返回类型：DATA_URL= 0，返回作为 base64 編碼字串。 FILE_URI=1，返回影像档的 URI。NATIVE_URI=2，返回图像本机URI (例如，資產庫)
sourceType: this.camera.PictureSourceType.CAMERA, //从哪里选择图片：PHOTOLIBRARY=0，相机拍照=1，SAVEDPHOTOALBUM=2。0和1其实都是本地图库
allowEdit: false, //在选择之前允许修改截图
encodingType: this.camera.EncodingType.JPEG, //保存的图片格式： JPEG = 0, PNG = 1
targetWidth: , //照片宽度
targetHeight: , //照片高度
mediaType: , //可选媒体类型：圖片=0，只允许选择图片將返回指定DestinationType的参数。 視頻格式=1，允许选择视频，最终返回 FILE_URI。ALLMEDIA= 2，允许所有媒体类型的选择。
cameraDirection: , //枪后摄像头类型：Back= 0,Front-facing = 1
saveToPhotoAlbum: true //保存进手机相册
};
this.camera.getPicture(options).then((imageData) => {
this.upload(imageData);
imgData = "data:image/jpeg;base64," + imageData;//“data:image/jpg;base64,iVBORw0KGgoAAAANSUhE……” 就是一张图片的Data URL
}, (err) => {
//输出你的错误信息
});
}
// 选取头像
public checkImg() {
let imgData = '';
let options: ImagePickerOptions = {
quality: ,
maximumImagesCount: ,
outputType: //0 是文件路径 1 是base64
};
this.imagePicker.getPictures(options).then((results) => {
for(let i = ; i < results.length; i++) {
this.upload(results[i]);
imgData = "data:image/jpeg;base64," + results[i];//
}
},(err)=> {
//输出你的错误提示
});
}
//上传头像
public upload(fileURL) {
let options: FileUploadOptions = {
fileKey: 'file',
fileName: fileURL.substr(fileURL.lastIndexOf('/') + ),
mimeType: 'image/jpeg',
httpMethod: 'POST'//请求方式 put或post
}
let params = {
'key': 'value',
'参数': '传给后台的数据'
};
options.params = params;
let tempFileUrl = fileURL;
let tempServe = '你的后台服务接口';
this.fileTransfer.upload(fileURL,encodeURI(tempServe), options)//fileURL 本地文件路径
.then((data) => {
let resuleData = JSON.parse(data.response);//data.response这里可以获取请求后台返回的数据
this.headImg = this.domSanitizer.bypassSecurityTrustUrl(resuleData.pam);//不会去angular 查
},(err) => {
this.globalFunction.showAlert('上传失败');
});
}
cordova 官网地址 第一次写不是很有经验，如果看不得不是很清楚，可以去官网查看
http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/index.html#backwards-compatibility-notes
下面是上传请求成功后通过以下数据获得你需要的数据，
