Micro letter applet image upload and preview

The effect is as follows:

wxml：

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

Select Picture

wx.chooseImage(object)Select a picture from an album or use camera

parameter	Types of	Mandatory	Explanation
count	Number	no	Select up to the number of pictures, the default 9
sizeType	StringArray	no	original: original; compressed: compressing FIG; default both
sourceType	StringArray	no	album: the album choice; camera: camera; both default
success	Function	Yes	The successful return of the callback function
fail	Function	no	Failure callback function
complate	Function	no	Completion callback function

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]
        })

      }
    })

  }

Picture Preview

wx.previewImage(object)preview picture

parameter	Types of	Mandatory	Explanation
current	String	no	Currently displayed image link, do not fill the first default urls
urls	StringArray	Yes	You need to preview the images linked list
success	Function	no	The successful return of the callback function
fail	Function	no	Failure callback function
complete	Function	no	Completion callback function

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

upload picture

Use a long time ago before JFinal上传the backend interface when using

Jfinal file upload

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
        });
      }

    })
  }