app头像上传vue_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));

}

})