微信调用手机相册的方法,解决iphone的预览以及多图长传卡死的问题

首先要注意.jsApiList的配置

config.jsApiList = [
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'scanQRCode',
        'chooseImage',
        'uploadImage'
      ];

  'chooseImage','uploadImage'为必填字段

还有就是发现一个问题iphone下直接for循环去请求会造成页面卡死，无奈只能递归。。。

以下项目是vue构建的贴代码

// 调用微信图片选择
export function addImage(vm) {
  if (!wxReady) {
    vm.$store.commit('popSet', {tips: '微信暂时未准备好，请稍后再试', status: 1, time: 1500});
    return;
  }
  wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
      vm.$store.state.photoLocalIds.push(localIds[0]);
      // 兼容新的ios设备转base64预览
      if (window.__wxjs_is_wkwebview) {
        getLocalData(localIds[0]);
      } else {
        vm.$store.state.photoAddImg.push(localIds[0]);
      }
    },
    fail: function(res) {
      console.log('scan fall', res);
      alert(res.errMsg);
    }
  });
  function getLocalData (localIds) {
    wx.getLocalImgData({
      localId: localIds, // 图片的localID
      success: function (res) {
        let imgData = res.localData; // localData是图片的base64数据，可以用img标签显示
        vm.$store.state.photoAddImg.push(imgData);
      },
      fail: function(res) {
        console.log('scan fall', res);
        alert(res.errMsg);
      }
    });
  }
};
// 调用微信图片上传到微信服务器
export function uploadImage (vm) {
  let data = vm.$store.state.photoLocalIds,
      seaverImgIds = [],
      n = 0;
  if (data.length === 0){
    vm.$store.commit('popSet', {tips: '请选择图片', status: 1, time: 1500});
    return;
  }
  vm.$store.commit('opacityMaskOn');
  upload(vm);
  function upload (vm){
    wx.uploadImage({
      localId: data[n], // 需要上传的图片的本地ID，由chooseImage接口获得
      isShowProgressTips: 0, // 默认为1，显示进度提示
      success: function (res) {
        seaverImgIds.push(res.serverId); // 返回图片的服务器端ID
        n += 1;
        // 递归多图上传
        if (n < data.length) {
          upload(vm);
        }
        if (n === data.length) {
          alert(seaverImgIds)
          vm.$store.commit('opacityMaskOff');
        }
      }
    });
  };
};

引用

<template>
    <div>
      <buttom @click="CaddImage">点击选择照片</buttom>
      <ul>
        <li v-for="item in imgList">
          <img :src="item">
        </li>
      </ul>
      <span @click="upload">提交上传</span>
    </div>
</template>

<script>
  import {addImage, uploadImage} from 'common/js/qrCodeScan.js';
  export default {
    data () {
      return {
        imgList: []
      };
    },
    methods: {
      CaddImage () {
        addImage(this);
      },
      upload () {
        uploadImage(this);
      }
    },
    created () {
      this.imgList = this.$store.state.photoAddImg;
    }
  };
</script>

最后收尾n===data.length时既表示图片已经全部上传到微信的服务器 只需要将serverId传给后台让他们按照id去取即可，