直接上代码

HTML

<view class="container" style="height:5rem;position: relative;">
<image class="changeImage" src="{{picPaths?picPaths:'../../../image/icon_tianjiazhaopian.png'}}"></image>
  <button class="chooseImg" bindtap='chooseImageTap'></button>
</view>

CSS

.changeImage{
  width: 5rem;
left: 50%;
margin-left: -2.5rem;
display: block;
position: absolute;
}
.chooseImg{
  height: 5rem;
width: 5rem;
left: 50%;
margin-left: -2.5rem;
background: none;
z-index: 1;
}

JS

//添加上传图片
  chooseImageTap: function () {
    var that = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      itemColor: "#00000",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            that.chooseWxImage('camera')
          }
        }
      }
    })
  },
  // 图片本地路径
  chooseWxImage: function (type) {
    var that = this;
    var imgsPaths = that.data.imgs;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function (res) {
        console.log(res.tempFilePaths[0]);
        that.upImgs(res.tempFilePaths[0], 0) //调用上传方法
      }
    })
  },
  //上传服务器
  upImgs: function (imgurl, index) {
    console.log(imgurl)
    var that = this;
    wx.uploadFile({
      url: api.user.update_resource,//
      filePath: imgurl,
      name: 'file',
      header: {
        'content-type': 'multipart/form-data',
        'token':wx.getStorageSync('token')
      },
      formData: {
        // 'resource': imgurl
      },
     success: function (res) {
        console.log(res) //接口返回网络路径
        let _data = JSON.parse(res.data);
        console.log(_data)
        that.setData({
          picPaths: _data.data.src
        })
        console.log(that.data.picPaths)
      }
    })
  },