app开始一直在找各种模块,实现头像功能,后来发现apicloud官方就直接封装好了函数api.getPicture(),可以直接调用,(真心赞)。由于开始后台原因没有搭好文件服务器,我就自己用api的数据云mcm,发现真心好用。现在在这里记下来,方便以后吧。
废话不多说,上代码:
function getPicture(sourceType) {
if (sourceType == 1) { // 拍照
api.getPicture({
sourceType: 'camera',
encodingType: 'jpg',
mediaValue: 'pic',
allowEdit: false,
destinationType: 'url',
quality: 90,
saveToPhotoAlbum: true
}, function(ret, err) {
api.showProgress({
style: 'default',
animationType: 'fade',
text: '图片上传中...',
modal: false
});
mcmupload(ret.data);
});
} else if (sourceType == 2) { // 从相机中选择
api.getPicture({
sourceType: 'library',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
quality: 100,
targetWidth: 200,
targetHeight: 200
}, function(ret, err) {
api.showProgress({
style: 'default',
animationType: 'fade',
text: '图片上传中...',
modal: false
})
mcmupload(ret.data)
});
}else{
return;
}
}
//去控制台引入mcm模块
function mcmupload(picUrl) {
var model = api.require('model');
model.config({
appKey: '1XXXXXXX-A7BA-618C-C68D-14E653CF3CE7'//自己去控制台看app的概览
});
model.uploadFile({
report: false,
data: {
file: {
name: picName + '.jpg',
url: picUrl
}
}
}, function(ret, err) {
if (ret) {
console.log(JSON.stringify(ret));
var headUrl = ret.url;
api.ajax({
url: ajaxUrlPre+'/app_my/headUrl',
method: 'post',
data: {
values: {
headUrl: headUrl
}
}
},function(ret, err){
if (ret) {
console.log( JSON.stringify(ret ) );
$('#avatarImg').attr('src', picUrl);
$api.setStorage('headUrl', picUrl);
api.hideProgress();
} else {
alert( JSON.stringify( err ) );
}
});
} else {
alert(JSON.stringify(err));
}
})
}
//这里是点击头像的展示区的时候,会弹出ACTION让用户选择“相册”,还是“拍照”。
function showAction() {
api.actionSheet({
title: '上传图片',
cancelTitle: '取消',
buttons: ['拍照', '从手机相册选择']
}, function(ret, err) {
if (ret) {
getPicture(ret.buttonIndex);
}
});
}
这里提一下,这里后来后台搞好了,我们又懒得再弄,就直接把数据云上的文件url返回给我,我再将地址回传给后台存储字符串,这样就可以访问后台的时候,直接展示数据云里的文件了。
—美中不足:1. 在mcm中,文件不能更新,只能新增,这边也就没做什么后续处理,但感觉这样还是有些缺陷的。2.上传前,没有对文件进行裁剪压缩,(ios可以完成裁剪,这是系统自带的功能)可以配合apicloud后台相关模块,对文件进行裁剪压缩后,再上传。