VUE上传头像，从相册选择、调用摄像头

HTML

<div class="picture">
       <div class="upload">

//这个图片是田字格，样式
<img @click="bb" v-show="add" src="../../images/jia.png" />

//这是要上传的图片
<img v-show="del" :src=tu />

//删除的图片
<img @click="deletes" src="../../images/del.png" />

// 这个点击保存，是手机上选择好相片才会出来的
<div id="confrim" v-show="btn" @click="bao">点击保存</div>
</div>
</div>

样式：

#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
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: ret.list[0].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) {
// 剪辑模块没有保存按钮，保存按钮为自己定义，，本次用了 #box
});

}
});
}}
},
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;
}
}

//点击申请按钮，传后台相片

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));
}

})

VUE上传头像，从相册选择、调用摄像头

猜你喜欢