小程序实践（十二）：七牛云上传图片

小程序更换用户头像功能、更换图片等功能

思路图片上传七牛云，成功之后返回的图片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

下载地址：https://developer.qiniu.com/sdk#community-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没有更新到服务器

所以在图片上传七牛云结果里面再进行关闭加载框 就能保证 上传图片到七牛云这个操作完成之后才能进行别的触摸操作。

 

 

 

--------------------------------------------------------------------------------------

 

小程序实践（一）：主页tab选项实现

小程序实践（二）：swiper组件实现轮播图效果

小程序实践（三）：九宫格实现及item跳转

小程序实践（四）：动态控制组件的显示/隐藏

小程序实践（五）：for循环绑定item的点击事件

小程序实践（六）：view内部组件排版

小程序实践（七）：页面间传值

小程序实践（八）：验证码倒计时功能

小程序实践（九）：返回到上一个界面并传值回去

小程序实践（十）：textarea实现简单的编辑文本界面

小程序实践（十一）：showModal的使用

小程序实践（十二）：七牛云上传图片