vue之前台wx-sdk图片上传

此篇只讲述vue前台上传图片。
如果vue项目中还没有装weixin-js-sdk，先安装

npm install weixin-js-sdk

然后在页面中引入：

import wx from 'weixin-js-sdk';

示例

图片部分代码：

<div class="photoBox">
       <img v-for="url in imgUrls" class="photo" :src="url" alt="">
       <img class="photo" src="../../img/photo/camera_02.png" alt="" @click="chooseWXImage()">
</div>

参考data中定义了几个变量供使用

export default {
  data() {
    return {
      // 接收本地图片id集
      imgUrls: [],
      // 返回的服务器id集
      serverIds: [],
      // 用于传参使用
      jsconfig: {
        aaurl: "",  // 正在访问的前台url地址
        token: ""   // 之前已经获取到的token
      }
    };
  },
}

正文

一、首先：初始化wx接口配置

正如上面定义的jsconfig中, 通过异步把 url地址 和 token 传给后台让后台做初始化，url地址 和 token 都上一步后台传过来的，或是其它获取渠道；
之后会传回来一些数据，也就是下面代码的 wx.config 中的 data.xx ,如果你的wx.config 中的 debug 是 true 开启调试模式的话，用微信访问初始化成功会返回如图：

this.postRequest("/weixin/initWXConfig", jsconfig).then(
      response => {
        let data = response.data.result;
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名，见附录1
          jsApiList: [ // 必填，需要使用的JS接口列表，
            "chooseImage",   // 选择图片
            "uploadImage",   // 上传至微信服务器，会保存3天
            "downloadImage"  // 下载图片
          ] 
        });
        wx.error(function (res) {
          alert(res);
        });
      },
      response => {
        console.log("请求失败了!!!!");
        alert("请求失败了!!!!");
      }
    );

二、单击相机图片，选择图片添加至图片序列

单击后跳转到本地选择图片，也就是微信的添加图片，如果没有跳到，可能是初始错误，刚开始代码中的click对应以下 chooseWXImage() 方法：

chooseWXImage() {
    wx.chooseImage({
      // 调用wx选择图片
      count: 5, // 默认9, 我设置成5张，也可通过变量设置
      sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
      success: res => {
        let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
        localIds.forEach(li => {
          this.imgUrls.push(li); // 示例中定义，的图片集合中接收到每个图片的src供页面展示
        });
      },
      fail: err => {
        alert("添加失败...");
      }
    });
  }

完成上传

单击完成创建，触发下面的 uploadWXImage() 方法，把图片上传到微信服务器，把返回来的serverIds通过异步传给后台，然后后台用此id到服务器上找到图片并下载到本地，或是其它操作
此方法得到serverIds
如图弹出返回数据则上传成功：

uploadWXImage() {
    this.imgUrls.forEach(li => {  // 循环刚才的本地url一张张上传
      wx.uploadImage({  // 调用微信上传图片
        localId: li, // 需要上传的图片的本地ID，由chooseImage接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: res => {
          let serverId = res.serverId;
          this.serverIds[0]=serverId;  // 给data中定义的数组添加值，把它传到后台
        },
        fail: err => {
          alert("创建失败...");
        }
      });
    });
  }

异步传serverIds省略。
到此上传图片完毕。

作者微信公众号“怪東瓜”，有问题私聊，我们共同探讨实用技术，练出最美身材。