小程序实践(十二):七牛云上传图片

2018-10-29 15:27:40来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

小程序实践(十二):七牛云上传图片

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js中windows的函数(随机数,计时器的实现)

下一篇:JavaScript -- 时光流逝(一):数据类型,变量,类型转换,函数