使用vue.js开发微信页面，使用weixinSDK调用wx.chooseImage异常

Question

使用vue2.0开发微信页面，使用weixinSDK调用wx.chooseImage时，微信的开发者工具显示正常，但手机点击按钮后无法正常打开相册（安卓测试，苹果未测试），vue的代码如下：

<template>
  <div class="Picture">
    <mu-flat-button label="选择" v-on:click.native="chooseImage" />
    <img :src="localIds"/>
  </div>
</template>
<script>
  import wx from 'weixin-js-sdk'
  import * as API from './PictureAPI.js'
  export default {
    name: 'Picture',
    data () {
      return {
        localIds: ''
      }
    },
    created () {
      this.$http.get(
        API.Get,
        { headers: { 'X-Requested-With': 'XMLHttpRequest' } }
      ).then((response) => {
        wx.config({
          debug: false,
          appId: response.body.appId,
          timestamp: parseInt(response.body.timestamp),
          nonceStr: response.body.nonceStr,
          signature: response.body.signature,
          jsApiList: [
            'chooseImage'
          ]
        })
      }, (response) => {
      })
    },
    methods: {
      chooseImage () {
        wx.chooseImage({
          success: function (res) {
            // 运行不报错，但手机调试时就是不出现相册
            console.log(res)
            this.localIds = res.localIds
          }
        })
      }
    }
  }
</script>

微信的开发者工具打印的内容为：

[JSSDK Info] chooseImage  
input  {"scene":"1|2","count":9,"sizeType":["original","compressed"],"sourceType":["album","camera"]};  
output  {"errMsg":"chooseImage:ok","localIds":["wxLocalResource://imageid123456789987654321","wxLocalResource://imageid987654321123456789"]}

求解答！！！

Answer 1

请问你的问题解决了吗
我也遇到了同样的问题呢

Answer 2

1. 建议在执行 wx.chooseImage 前先使用 wx.ready

2. 推荐辅助调试工具 https://github.com/WechatFE/v...

Answer 3

解决了吗?我也出现相同的问题了

Answer 4

1.
res.localIds 是个数组。
:src="localIds" 你弄个数组绑定？

2.wx.chooseImage调用完要再调用如下，如果是在wkwebview ios平台上。

wx.getLocalImgData({
    localId: '', // 图片的localID
    success: function (res) {
    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
    }

});

备注：此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题。

具体可参考《iOS网页开发适配指南》
https://mp.weixin.qq.com/adva...

Answer 5

必须在公众号里打开页面才可以打开相机和选择相册。

Answer 6

请教，这个问题现在解决了吗，我也遇到了同样的问题

Answer 7

你好，请问你是怎么解决的呢，遇到了这个问题，很是头疼啊

Answer 8

从哪看出来异常了,"errMsg":"chooseImage:ok",告诉你调用chooseImage成功,localIds告诉你格式.难道你还想开发者工具弹出个相册让你选图片不成.

Answer 9

this指向的问题，
chooseImage () {

let that = this 
wx.chooseImage({
  success: function (res) {
    // 运行不报错，但手机调试时就是不出现相册
    console.log(res)
    that.localIds = res.localIds
  }
})

}

Answer 10

<template>
<div class="Picture">

<mu-flat-button label="选择" v-on:click.native="chooseImage" />
<div v-for="(item, index) in previews" :key="index">
  <img :src="item"/>
</div>

</div>
</template>
<script>
import wx from 'weixin-js-sdk'
import * as API from './PictureAPI.js'
export default {

name: 'Picture',
data () {
  return {
    previews: [],
    localIds: ''
  }
},
created () {
  this.$http.get(
    API.Get,
    { headers: { 'X-Requested-With': 'XMLHttpRequest' } }
  ).then((response) => {
    wx.config({
      debug: false,
      appId: response.body.appId,
      timestamp: parseInt(response.body.timestamp),
      nonceStr: response.body.nonceStr,
      signature: response.body.signature,
      jsApiList: [
        'chooseImage',
        'uploadImage'
      ]
    })
  }, (response) => {
  })
},
methods: {
  chooseImage () {
    wx.chooseImage({
      success: function (res) {
        // 运行不报错，但手机调试时就是不出现相册
        console.log(res)
        res.localIds.forEach(item => {
          self.uploadImage(item)
        });
      }
    })
  },
  uploadImage: function(localId) {
    var self = this
    var urlArray = []
    window.wx.uploadImage({
    localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function(res) {
      var serverId = res.serverId // 返回图片的服务器端ID
      urlArray.push(serverId)
      // 调用服务端接口通知从微信下载到本地
      self.$axios.post('http://你的接口', { media_ids: urlArray })
        .then(res => {
          let urlList = res.data.url_list
          self.previews.push(urlList)
        })
    }
  })
}

}
</script>