效果图如下：

wxml：

<view class="container">
<image class="image" src="{{imgPath}}" mode=\'scaleToFill\' bindtap="previewImg"></image>
<button bindtap="selectImg">选择图片</button>
<button bindtap="loadImg">上传图片</button>
</view>

图片选择

wx.chooseImage(object)从相册中选择图片或是使用拍照

selectImg: function () {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: [\'original\', \'compressed\'],
      sourceType: [\'album\', \'camera\'],
      success: function (res) {
        //res.tempFilePaths 返回图片本地文件路径列表
        var tempFilePaths = res.tempFilePaths;
        that.setData({
          imgPath: tempFilePaths[0]
        })

      }
    })

  }

图片预览

wx.previewImage(object)预览图片

previewImg: function (e) {
    var img = this.data.imgPath;
    // 设置预览图片路径
    wx.previewImage({
      current: img,
      urls: [img]
    })
  }

图片上传

使用很早之前以前的JFinal上传时用的后端接口

Jfinal文件上传

loadImg: function () {
    var that = this;
    wx.uploadFile({
      url: "http://localhost:8080/upload/upload",
      filePath: that.data.imgPath,
      name: "upload_file",
      // 请求携带的额外form data
      /*formData: {
        "id": id
      },*/
      header: {
        \'Content-Type\': "multipart/form-data"
      },
      success: function (res) {
        wx.showToast({
          title: "图像上传成功！",
          icon: "",
          duration: 1500,
          mask: true
        });
      },
      fail: function (res) {
        wx.showToast({
          title: "上传失败，请检查网络或稍后重试。",
          icon: "none",
          duration: 1500,
          mask: true
        });
      }

    })
  }