關於微信公衆號上傳圖片（VUE版）組件封裝

基本的UI

因使用的是Muse-UI，對不一樣的畫面適配並不友好，僅供參考。

第一步，使用mu-grid-list並指定cols=3，即每行顯示三張。而後添加一個隱藏的Input用於處理非微信（JS-SDK）下的圖片上傳。
UI部分代碼，其中Style 能夠參考名字本身實現，主要就是修改 mu-grid-list的默認樣式

<div>
  <mu-grid-list :cols="3" :cellHeight="90" >
    <mu-grid-tile v-for="img, index in images" titleBarClass="blt-hidden" :key="index">
      <img :src="img" @click="preview(img)"/>
      <div class="btm-bar">
        <mu-icon-button icon="delete" @click="remove(index)" slot="action" class="btn-opt" />
        <!--<mu-icon-button icon="zoom_in" slot="action" @click="selectedImage = img" class="btn-opt"/>-->
      </div>
    </mu-grid-tile>
    <mu-grid-tile titleBarClass="blt-hidden">
      <img :src="addPic" @click="add" v-show="notFull"/>
    </mu-grid-tile>
  </mu-grid-list>
  <input type="file" @change="onFileChange" multiple style="display: none" ref="upload" >
  <div class="blt-fullscreen" v-if="selectedImage != null"><img :src="selectedImage"  @click="selectedImage = null"><mu-icon-button icon="close" class="blt-rt" touch @click="selectedImage = null"/></div>
</div>

第二步，處理JS-SDK配置

mounted () {
  let isWeChatBroswer = Wechat.checkWeChatBroswer()
  if (isWeChatBroswer) {
    // 初始化JSConfig
    let param = {url: window.location.href} 
    this.$http.get('https://www.XXXXXX.com/jssdk/config', {params: param}).then((response) => {
      let data = response.data
      this.$wx.config({
        appId: data.appId, // 必填，公衆號的惟一標識
        timestamp: data.time, // 必填，生成簽名的時間戳
        nonceStr: data.randomStr, // 必填，生成簽名的隨機串
        signature: data.signature, // 必填，簽名，見附錄1
        jsApiList: ['checkJsApi', 'chooseImage',
          'previewImage', 'uploadImage', 'downloadImage'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
      })
      this.ready = true
    }).catch((err) => {
      this.$toast(err.message)
      this.ready = false
    })
  }
}

第三步，處理JS-SDK下的上傳，但同時，還應該注意有IOS8以上的微信裏，選擇的圖片對應的LocalId不能直接使用img src進行顯示。

// 經過localId讀取對應的圖片數據，同時經過【window.__wxjs_is_wkwebview】判斷是否IOS微信6.5.3以上的版本，而後把localId轉爲Base64圖片格式。另外經過$emit把讀到的文件數據傳給畫面組件。
add (e) {
  // e.preventDefault()
  if (this.ready) {
    let currentSize = this.images.length 
    let count = this.maxSize === 0 ? 9 : this.maxSize - currentSize
    this.$wx.chooseImage({
      count: count, // 默認9
      sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
      sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
      success: (res) => {
        let localIds = res.localIds // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
        localIds.forEach(li => {
          this.images.push(li)
        })
        this.readImages(currentSize)
      },
      fail: (err) => {
        this.logs.push(err)
      }
    })
  } else {
    // 普通的上傳
    e.preventDefault()
    this.$refs.upload.click()
  }
},
readImages(index) {
    this.$wx.getLocalImgData({
      localId: this.images[xIndex],
      success: (res) => {
        let localData = res.localData
        if (window.__wxjs_is_wkwebview) {
          this.images.splice(xIndex, 1, localData)
          this.$emit('selected', localData)
        } else {
          this.$emit('selected', localData)
        }
        this.readImages(xIndex + 1)
      }
    })
}

頁面的其餘方法

onFileChange (e) {
  var files = e.target.files || e.dataTransfer.files
  if (!files.length) {
    return
  }
  this.createImage(files)
},
createImage (file) {
  if (typeof FileReader === 'undefined') {
    alert('您的瀏覽器不支持圖片上傳，請升級您的瀏覽器')
    return false
  }
  // var image = new Image()
  var vm = this
  var leng = file.length
  if (this.maxSize === 0 || this.images.length + leng <= this.maxSize) {
    // 繼續處理
  } else {
    vm.$toast('當前選擇的圖片已超過最大限制')
    return
  }
  for (var i = 0; i < leng; i++) {
   // FIXME 壓縮
    /* eslint-disable no-new,new-cap,no-undef */
    new html5ImgCompress(file[i], {
      done: function (file, base64) {
        vm.images.push(base64)
        this.$emit('selected', base64)
      },
      notSupport: function (file) {
        console.log('瀏覽器不支持！')
      }
    })
  }
  vm.$refs.upload.value = null
},
remove (index) {
  this.$emit('removed', index)
  this.images.splice(index, 1)
},
preview (img) {
  if (this.ready) {
    this.$wx.previewImage({
      current: img, // 當前顯示圖片的http連接
      urls: this.images // 須要預覽的圖片http連接列表
    })
  } else {
    this.selectedImage = img
  }
},

以上僅處理上傳，若是有編輯的話，還須要其餘處理