8.2.1 图片

在项目开发过程中，经常需要实现上传图片的功能。本节将阐述小程序开发中如何选择并上传图片。

wx.chooseImage(OBJECT)

选择图片有两种方式，从本地相册选择图片或使用相机拍照。 OBJECT参数说明，如表8-9所示：

表8-9

wx.previewImage(OBJECT)

预览图片。 OBJECT参数说明，如表8-10所示：

表8-10

wx.getImageInfo(OBJECT)

获取图片信息。 OBJECT参数说明，如表8-11所示：

表8-11

success返回参数说明，如表8-12所示：

表8-12

示例代码：

wxml中：

<button style="margin:30rpx;" bindtap="chooseimage">获取图片</button>  
<image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 700rpx"/>

js中：

Page({
  data: {
    tempFilePaths: ''
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  chooseimage: function () {
    var _this = this;
    wx.chooseImage({
      count: 1, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
        _this.setData({
          tempFilePaths: res.tempFilePaths
        })
      }
    })
    wx.getImageInfo({
      src: 'images/a.jpg',
      success: function (res) {
        console.log(res.width)
        console.log(res.height)
      }
    })
  }
})

运行效果如图8-1所示：

图8-1 图片API示例运行效果图

注意:

• 文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。