头像昵称填写 | 微信开放文档 这里面有个微信自带的编辑头像的方法,但是测试发现这个上传头像特别慢。至少需要5s。如果修改以后再去访问接口给接口数据那么时间花费的更久。 原因是因为
进行安全检验需要时间,避免上传敏感图片。
但是我们实际用的时候测试说太慢了不行,只能改变思路,自己写了
<button class="avatar-wrapper"bindtap='changeHead'> <image class="avatar" src="{{avatar}}"></image> </button>
changeHead(){
var _this = this;
wx.showActionSheet({
itemList: ["拍照", "从相册中选择"],
itemColor: "#000000",
success: function (res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
_this.imgWShow("camera") //拍照
} else if (res.tapIndex == 1) {
_this.imgWShow("album") //相册
}
}
}
})
},
// 点击调用手机相册/拍照
imgWShow: function (type) {
var _this = this;
let len = 0;
if (_this.data.imgList != null) {
len = _this.data.imgList.length
} //获取当前已有的图片
wx.chooseImage({
count:1, //最多还能上传的图片数,这里最多可以上传1张
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: [type], //可以指定来源是相册还是相机, 默认二者都有
success: function (res) {
wx.showToast({
title: '正在上传...',
icon: "loading",
mask: true,
duration: 1000
})
// 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
var imgList = res.tempFilePaths
_this.UploadImg(imgList[0])//访问接口把上传的图片给接口
},
fail: function () {
wx.showToast({
title: '图片上传失败',
icon: 'none'
})
return;
}
})
},
UploadImg(avatarUrl){
console.log(avatarUrl)
this.uploadFile(avatarUrl).then(res => {
this.setData({
avatar:avatarUrl,
})
})
},uploadFile: (filePath) => {
let url = "http://XXXXX/uploaded_file"//上传的接口
return new Promise((resolve, reject) => {
wx.uploadFile({
url: url,
filePath: filePath,
name: "file",
header: {
'content-type': 'application/json',
'token': getToken(),
},
success: (res) => {
console.log(res)
let result = JSON.parse(res.data)
let {code} = result
if (code === 200) {
return resolve(result.data)
} else {
return reject(result.message)
}
},
fail() {
reject('接口有误,请检查')
}
})
})
},
版权声明:本文为qq_33769914原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。