企业微信之手机图片选择并上传

企业微信有自己的JS-SDK去实现

附上网页：https://work.weixin.qq.com/api/doc/90000/90136/91195
接下来记录我在项目过程中利用企业微信js-sdk去实现图片打开，上传，需要预览的可以继续更新

1.配置sdkConfig：

const sdkConfig = (config, jsApiList, ready, error) => {
  wx.config({
    beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: config.corpid, // 必填，企业微信的corpID
    timestamp: config.timestamp, // 必填，生成签名的时间戳
    nonceStr: config.nonceStr, // 必填，生成签名的随机串
    signature: config.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
    jsApiList: jsApiList, // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
  });
  //初始化微信js-sdk
  wx.ready(ready);
  wx.error(error);
};

export default sdkConfig;

2.配置对应的api：

/**
 * 拍照或从手机相册中选图接口
 */
export const chooseImage = (count, sourceType, success, complete) => {
  wx.chooseImage({
    count: count, // 默认9
    sizeType: ["original"], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有
    defaultCameraMode: "normal", //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。（注：用户进入拍照界面仍然可自由切换两种模式）
    isSaveToAlbum: 1, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
    success: success,
    complete: complete
  });
};

/**
 *上传图片接口
 */
export const uploadImage = (localId, success, complete) => {
  wx.uploadImage({
    localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgressTips: 0, // 默认为1，显示进度提示
    success: success,
    complete: complete
  });
};

3.获取签名

export const getSignature = url => {
  return axios.post(
    `${config.baseUrl.organizeSync}/xxx/xxx/getSignature`,
    JSON.stringify({
      url: url
    }),
    {
      headers: {
        "Content-Type": "application/json"
      }
    }
  );
};

4.引入以上js：

import { chooseImage, uploadImage } from "@/sdk/xxx";
import { getSignature } from "@/api/xxx";
import sdkConfig from "@/sdk/config";

5.vue:

...
<div class="xxx" @click="uploadImg">
	......
</div>
...


methods: {
/**
     * 上传图片
     */
    uploadImg() {
      let _this = this;
      _this.chooseImage(["album", "camera"], 9);
    },
    /**
     * 拍照或从手机相册中选图接口
     */
    chooseImage(sourceType, count) {
      let _this = this;
      chooseImage(count, sourceType, res => {
        if (res.localIds.length != 0) {
          _this.uploadImage(res.localIds);
        }
        // andriod中localId可以作为img标签的src属性显示图片；
        // iOS应当使用 getLocalImgData 获取图片base64数据，从而用于img标签的显示（在img标签内使用 wx.chooseImage 的 localid 显示可能会不成功）
      });
    },
    /**
     *上传图片接口
     */
    uploadImage(localIds) {
      let _this = this;
      localIds.forEach(localId => {
        uploadImage(
          localId, // 需要上传的图片的本地ID，由chooseImage接口获得
          res => {
            //获得图片在企业微信服务端的ID
            var serverId = res.serverId; // 返回图片的服务器端ID
            ......
          }
        );
      });
    },
    async wxConfig() {
      let _this = this;
      let res = await getSignature(
        encodeURIComponent(location.href.split("#")[0])
      );
      let config = res.data.data;
      let jsApiList = ["chooseImage", "uploadImage", "getLocalImgData"];
      let ready = () => {};
      let error = res => {
        _this.res = res;
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      };
      sdkConfig(config, jsApiList, ready, error);
    }
  },
  mounted() {
    let _this = this;
    _this.wxConfig();
  }

以此记录。