微信小程序开发（三）

上传照片到缓存

这里实现上传本地照片/拍摄照片并上传显示到当前页面的功能，主要对JS文件分析

STEP1实现选择本地相册/拍摄功能

wxml内绑定choosWay函数：

<image class="upload-picture" wx:if="{{!uploadSuc}}" mode="widthFix" src='../../img/upload.jpg' bindtap='chooseWay'>image>

chooseWay函数实现：

// 弹窗显示照片提交方式

  chooseWay: function() {
    let that = this;
    wx.showActionSheet({   // 引入弹窗
      itemList: ['从相册中选择','拍照'],
      itemColor:"#f7982a",
      success: function(res) {
      // 根据弹窗中对应的选项返回调用wx.chooseImage时所需要的类型
        if (!res.cancel) {
          if(res.tapIndex==0) {
            that.chooseWxImage('album') //从相册中选择
          } else if(res.tapIndex==1) {
            that.chooseWxImage('camera') // 拍摄
          }
        }
      }
    })
  },

STEP2获取照片

  //获取照片
  chooseWxImage:function(type) {
    let that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],

      success: function (res) {
      // 此时可以通过下面的方式获取到上传的照片的路径
        var tempFilePaths = res.tempFilePaths; 
        // 设置当前的图片路径
        that.setData({
          img_path: res.tempFilePaths[0],
          uploadSuc: true,
        })
      },
    })
  },

这里要特别注意，如果需要在wx.chooseImage（或其他微信小程序接口函数内）对this.data数据进行更改时，需要在该函数外let that = this。这与JS一样，如果在接口内直接使用this，this指代的是当前借口内的函数。

STEP3用wxml显示图片

<image class="upload-picture" wx:if="{{uploadSuc}}" mode="widthFix" src="{{img_path}}">image>

实现结果：