VUE上传头像，从相册选择、调用摄像头，ios适用transPath的转换
HTML
//这个图片是田字格，样式
//这是要上传的图片
//删除的图片
// 这个点击保存，是手机上选择好相片才会出来的
样式：
#confrim{
width: 100%;
height: 0.52rem;
position: fixed;
bottom:0;
left: 0;
text-align: center;
font-size: 0.14rem;
z-index: 200;
background: #3ABA63;
line-height: 0.5rem;
}
DATA里
tu:'',
btn:false,
add:true,
del:false,
mthods里
deletes:function(){
this.tu=""
this.del=false
this.add=true
},
//上传头像
bb:function () {
// 点击弹出选择框
api.actionSheet({
cancelTitle : '取消',
buttons : ['拍照', '手机相册']
}, function(ret, err) {
if (ret) {
// 调用拍照功能
getPicture(ret.buttonIndex);
}
});
let that=this;
let thathttp=this.$http
//相机拍照
function getPicture(sourceType) {
// 1为相机拍照，2为从相册选择
if (sourceType == 1) {
api.getPicture({
sourceType : 'camera',
encodingType : 'jpg',
mediaValue : 'pic',
allowEdit : false,
quality : 96,
saveToPhotoAlbum : false
}, function(ret, err) {
// 获取拍照图像并剪辑
if (!ret.data.length) {
api.toast({
msg : '请使用相机拍照',
duration : 3000,
location : 'bottom'
});
} else {
// 剪辑图片
var FNImageClip = api.require('FNImageClip');
that.btn=true;
FNImageClip.open({
rect : {
x : 0,
y : 0,
w : api.winWidth,
h : api.winHeight-50
// - document.querySelector('#box').offsetHeight
},
srcPath : ret.data,
mode : 'image',
style : {
mask : 'rgba(0,0,0,0.75)',
clip : {
w : 200,
h : 200,
x : (api.frameWidth - 200) / 2,
y : (api.frameHeight - 200) / 2,
borderColor : '#0f0',
borderWidth : 1,
appearance : 'rectangle'
}
},
}, function(ret, err) {
});
}
});
} else if (sourceType == 2) {
// 从相册里选择图片
var UIMediaScanner = api.require('UIMediaScanner');
UIMediaScanner.open({
type : 'picture',
column : 4,
classify : true,
max : 1,
sort : {
key : 'time',
order : 'desc'
},
texts : {
stateText : '已选择*项',
cancelText : '取消',
finishText : '完成'
},
styles : {
bg : '#fff',
mark : {
icon : '',
position : 'bottom_left',
size : 20
},
nav : {
bg : '#eee',
stateColor : '#000',
stateSize : 18,
cancelBg : 'rgba(0,0,0,0)',
cancelColor : '#000',
cancelSize : 18,
finishBg : 'rgba(0,0,0,0)',
finishColor : '#000',
finishSize : 18
}
},
scrollToBottom : {
intervalTime : 3,
anim : true
},
exchange : true,
rotation : true
}, function(ret) {
if (ret) {
that.path=ret
//回到主页隐藏自定义保存按钮
if (ret.list) {
//ios需要transPath转换，Android要不要都可以
UIMediaScanner.transPath({
path:ret.list[0].path
},function(rett,errr){
if(rett){
that.wei=JSON.stringify(ret.list)
// ret.list[0].path为图片路径
// 剪辑图片
var FNImageClip = api.require('FNImageClip');
that.btn=true;
FNImageClip.open({
rect: {
x: 0,
y: 0,
w: api.winWidth,
h: api.winHeight - 50
},
srcPath: rett.path,
style : {
mask : 'rgba(0,0,0,0.75)',
clip : {
w : 200,
h : 200,
x : (api.frameWidth - 200) / 2,
y : (api.frameHeight - 200) / 2,
borderColor : '#0f0',
borderWidth : 0,
appearance : 'rectangle'
}
},
fixedOn: api.frameName
}, function(ret, err) {
//物理返回键关闭页面
api.addEventListener({
name: 'keyback'
}, function(ret, err) {
FNImageClip.close();
that.btn=false;
});
// 剪辑模块没有保存按钮，保存按钮为自己定义，，本次用了 #box
});
}else{
// alert(111111111111)
that.btn=false;
}
})
}else{
// alert(111111111111)
that.btn=false;
}
}
});
}}
},
bao:function () {
// 点击保存按钮
function nub(minNum, maxNum) {
switch(arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum);
break;
default:
return 0;
break;
}
}
let thathttp=this.$http
var that=this;
var FNImageClip = api.require('FNImageClip');
var nubs = nub(1000, 3000);
FNImageClip.save({
destPath : 'fs://tx_' + nubs + '.jpg',
copyToAlbum : false,
quality : 1
}, function(ret, err) {
// 保存按钮消失
that.btn=false;
// ret.destPath为返回图片路径
var tx = ret.destPath;
FNImageClip.close();
if (ret) {
// 出现加载中
api.showProgress({
animationType: 'fade',
title: '冷静下',
text: '先喝杯茶...',
});
that.add=false,
that.del=true,
that.tu=ret.destPath
// 上传图片
// avatar名字前后端一致
// api.ajax({
// method:"post",
// url:that.text1()+'/v1/users/avatar/53/1',
// data:{
// files: {
// avatar:ret.destPath
// }
// },
// dataType:'json',
// async:true,
// },function(ret,err){
// if(ret.code==200){
// that.tu=that.text1()+ ret.data.path
// }else {
// }
// 成功后删除加载中
api.hideProgress();
// alert(JSON.stringify(that.tu));
// })
} else {
alert(JSON.stringify(err));
}
});
},
//上传头像结束
//点击申请按钮，传后台相片
apply:function(){
var that = this;
var tha = this.$http;
var http = this.text1()
//判断是否上传头像
if(that.tu==""){
//提示无上传图片
that.meaning=true
that.mean=that.。。。
setTimeout(function () {
that.meaning=false
},2000)
return false;
}
var timestamp=new Date().getTime()
var arr={
access_token:that.$cookieStore.getCookie('token'),
timestamp:timestamp,
}
var a="";
for(let i in arr){
a+=i+"="+arr[i]+"&";
}
var md=that.Md5.md5(a+"key=air_snow").toUpperCase()
var qs=require('qs')
// 接口
api.ajax({
method:"post",
url:/url地址,
data:{
files: {
picture:that.tu
}
},
dataType:'json',
async:true,
},function(ret,err){
if(ret.code==200){
// alert(JSON.stringify(88888));
// alert(JSON.stringify(that.tu));
//成功后你想要的结果
that.pop1=true
}else {
alert(JSON.stringify(err));
}
})