小程序更换用户头像功能、更换图片等功能
思路图片上传七牛云，成功之后返回的图片url上传项目服务器
------------------------------------------------------------------------------------------------------
先选择图片
小程序提供api ：chooseImage
var that = this wx.chooseImage({ sourceType: ['album', 'camera'], // 相册选取+拍摄选取 sizeType: ['compressed'], // 压缩图 count: 1, // 最多可以选择的图片张数 success: function(res) { // 成功 , 显示图片 that.setData({ userAvatar: res.tempFilePaths }) //上传图片到七牛 wx.showLoading({ title: '', mask: true }) that.updateImg(res.tempFilePaths, that.data.token) }, fail: function(res) { // 失败 } })
------------------------------------------------------------------------------------------------------
获取到图片之后 上传图片到七牛云
准备：
先下载配置小程序七牛云的sdk
下载地址：
找到小程序的sdk 点击安装
下载一个文件 ，解压缩之后找到sdk目录下的 qiniuUploader.js 文件 复制到小程序项目的utils目录下，配置就完成了。
------------------------------------------------------------------------------------------------------
使用：
1、在需要用到七牛云的页面 require 七牛云的sdk
2、使用qiniuUploader上传图片
注意，uptoken uploadURL domain 是从服务器获取到的 , key就是上传到七牛云的图片路径+文件名
//上传图片到七牛 updateImg: function(filePath, uptoken) { var that = this var pathX = filePath + '' var qiniu_key = Date.parse(new Date()) / 1000 + ".jpg" qiniuUploader.upload(pathX, (res) => { // 将图片url上传给服务器 if (that.data.domain[that.data.domain.length - 1] == '/') { that.setData({ userAvatar: that.data.domain + qiniu_key }) console.log('avatar_url:' + that.data.userAvatar) } else { that.setData({ userAvatar: that.data.domain + '/' + qiniu_key }) } // 图片上传成功之后取消加载框 wx.hideLoading() }, (error) => { // 图片上传失败之后取消加载框 wx.hideLoading() // 把图片更改回来 that.setData({ userAvatar: that.data.userInfo.avatar }) }, { key: qiniu_key, uptoken: that.data.token, // 从自己的服务器获取 uploadURL: that.data.qiniu_url, // 从自己的服务器获取 domain: that.data.domain, // 从自己的服务器获取 }); },
3、注意上面在
that.updateImg(res.tempFilePaths, that.data.token)
之前进行了一步显示加载框的操作，并设置 mask:true
wx.showLoading({ title: '', mask: true })
该属性作用：是否显示透明蒙层，防止触摸穿透，默认是false
这里设置为true ，则为了加载框不消失的情况下，无法进行别的触摸操作
因为要上传图片到七牛云，这是一个异步操作，如果上传图片到七牛云还没有成功，用户点击了退出或者保存按钮，就会导致七牛云返回的图片url没有更新到服务器
所以在图片上传七牛云结果里面再进行关闭加载框 就能保证 上传图片到七牛云这个操作完成之后才能进行别的触摸操作。
--------------------------------------------------------------------------------------