這幾天一直負責做微信小程式這一塊，也可以說是邊做邊學習吧，把自己做的微信小程式的一些功能分享出來，與大家探討一下，相互學習相互進步。

先看下效果圖

只寫了一下效果樣式的話希望大家不要太在意，下面馬路殺手要開車了。

1.wxml排版和佈局

  這個排版非常簡單就是一個按鈕button加個圖片image標籤而已，這個相信有點基礎的人都能理解，直接放程式碼：

<view class="container">
  <view class="userinfo">
    <button bindtap="upload"> 上傳圖片 </button>
  </view
 
>
  <block wx:for="{{tempFilePaths}}" wx:key="{{index}}">
    <image src="{{item }}" bindtap="listenerButtonPreviewImage" data-index="{{index}}" style="width: 100%;"/>
  </block>
</view>

2.重要的js

  首先定義一個點選按鈕上傳圖片的一個事件，這裡會用到微信圖片API中的wx.chooseImage

  這個API會有6個引數分別是：

好了該介紹的都介紹了，下面來看下程式碼：

upload: function () {
    let that = this;
    wx.chooseImage({
      count: 
 
9, // 預設9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
      success: res => {
        wx.showToast({
          title: '正在上傳...',
          icon: 'loading',
          mask: true,
          duration: 1000
        })  
        // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
        let tempFilePaths = res.tempFilePaths;
        that.setData({
          tempFilePaths: tempFilePaths
        })
  
      }
    })
  },

不要覺得這樣就萬事大吉了，現在僅僅是在前端顯示，你還要上傳到伺服器，上傳的話就會用到另一個API了wx.uploadFile

這個API會有8個引數

下面來看下程式碼是什麼樣的：

upload: function () {
    let that = this;
    wx.chooseImage({
      count: 9, // 預設9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
      success: res => {
        wx.showToast({
          title: '正在上傳...',
          icon: 'loading',
          mask: true,
          duration: 1000
        })  
        // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
        let tempFilePaths = res.tempFilePaths;

        that.setData({
          tempFilePaths: tempFilePaths
        })
        /**
         * 上傳完成後把檔案上傳到伺服器
         */
        var count = 0;
        for (var i = 0, h = tempFilePaths.length; i < h; i++) {
          //上傳檔案
        /*  wx.uploadFile({
            url: HOST + '地址路徑',
            filePath: tempFilePaths[i],
            name: 'uploadfile_ant',
            header: {
              "Content-Type": "multipart/form-data"
            },
            success: function (res) {
              count++;
              //如果是最後一張,則隱藏等待中  
              if (count == tempFilePaths.length) {
                wx.hideToast();
              }
            },
            fail: function (res) {
              wx.hideToast();
              wx.showModal({
                title: '錯誤提示',
                content: '上傳圖片失敗',
                showCancel: false,
                success: function (res) { }
              })
            }
          });*/
        }  
        
      }
    })
  },

有的人會有疑問為什麼會定義一個count為0呢，就是因為需要判斷是不是最後一張圖片如果是就不需要顯示載入中了。

好了，上傳圖片基本上說完了接著看預覽圖片，預覽圖片的話也要用到一個微信的API是wx.previewImage

這個API有五個引數

定義預覽圖片方法，點選圖片的時候執行：

listenerButtonPreviewImage: function (e) {
    let index = e.target.dataset.index;//預覽圖片的編號
    let that = this;
    wx.previewImage({
      current: that.data.tempFilePaths[index],//預覽圖片連結
      urls: that.data.tempFilePaths,//圖片預覽list列表
      success: function (res) {
        //console.log(res);
      },
      fail: function () {
        //console.log('fail')
      }
    })
  },

大家有問題的話可以提出來，我們一起解決，一起進步，希望本文章對大家有幫助，謝謝