玩转小程序图片功能

Posted 2020-10-29 liangshaoming

背景

最近经常接触小程序，图片功能还是比较重要的，于是自己小小总结了一番，希望对大家有帮助。

图片上传

应用场景：个人页的头像，提交资料的图像文件等

我认为一个正确的图片上传流程：

1. 客户端上传图片
2. 预览
3. 提交到服务器保存

所以，对于小程序这个流程就很方便了，只需要用到三个方法：

1. wx.chooseImage
2. wx.previewImage（通过图片直接显示，可不需要）
3. wx.uploadFile

以下简略用几个按钮模拟这个过程,先上代码：

testimg.wxml

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasImage}}" bindtap=‘chooseImage‘> 上传头像 </button>
    <block wx:else>
      <button bindtap=‘previewImage‘> 预览头像 </button>
      <button bindtap=‘getImageInfo‘> 获取头像信息 </button>
      <button bindtap=‘uploadImage‘> 提交头像 </button>
      <image src="{{userInfo.avatarUrl}}"></image>
    </block>
  </view>
</view>

testimg.js

Page({
  data: {
    userInfo: {},
    hasImage: false,
  },
  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        that.setData({
          ‘userInfo.avatarUrl‘: tempFilePaths[0],
          hasImage: true,
        })
      }
    })
  },
  previewImage: function () {
    var imgUrl = this.data.userInfo.avatarUrl;
    wx.previewImage({
      current: imgUrl, // 当前显示图片的http链接
      urls: [imgUrl] // 需要预览的图片http链接列表
    })
  },
  getImageInfo: function () {
    var imgUrl = this.data.userInfo.avatarUrl
    wx.getImageInfo({
      src: imgUrl,
      success: function (res) {
        console.log(res)
      }
    })
  },
  uploadImage: function () {
    console.log(111);
    var imgUrl = this.data.userInfo.avatarUrl
    wx.uploadFile({
      url: ‘http://npt.catww.com:8572/index.php/Mina/User/upload‘,
      filePath: imgUrl,
      name: ‘file‘,
      formData: {
        ‘user‘: ‘test‘
      },
      success: function (res) {
        console.log(res);
        var data = res.data
        //do something
      },
    })
  }
})

解释：

1. 上传本地图片到临时资源
2. 可用图片的src属性或者用wx.previewImage作为预览
3. 上传图片到服务器，内容文件和其他文字，这就相当于上传一个表单，就用这个方法就可以
4. 中间有个获取图片信息的，可以用作校验图片信息，比如图片大小，图片格式