微信localids上传自己服务器,移动端微信图片上传

最近做项目，其中有个需求是在微信企业号上实现图片上传操作。一开始我就把重点放在了"移动端图片上传"而不是"微信图片上传"，所以各种查资料，找插件，费了好些功夫，实现起来也是各种困难。后来接触到微信公众号，稍微了解了一下，才知道利用微信公众号或者现在已经升级为企业微信的企业号的API，还是挺简单的一个功能。下面我就详细整理一下整个过程，做个笔记，一方面可以帮助到从未接触过这个功能的同学，一方面也方便自己日后翻阅。

1、首先进入微信公众平台，查看JS-SDK开发文档。https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

2、开发文档有详细的步骤说明，但我还是根据我自己做的过程再稍微记录一下。

第一步中的绑定安全域名可不做，不会影响功能的实现。我直接从第二部引进js文件开始的。当我们想要通过微信上传图片时，有两种方法：一种是JS文件调用，一种是接口调用。这里用的是第一种，通过引进JS文件，然后直接调用接口，不再使用URL等接口地址。

3、JS文件的引入：

图1-引进JS文件

4、通过config接口注入权限验证配置：

这一步尤为重要。

图2-配置信息

1)在开发调试时，可将debug设为true,这样可以看到返回的信息，方便调试bug。但在生产环境上，记得设为false。

2)appId是公众号的唯一标识。项目挂靠在哪个公众号或者企业号，就去找相关负责人拿到appId，这个是固定的值，没有改动，也不需要调用获取。(服务器端，也就是后端开发人员去拿到这个值)

3)除了jsApiList的值需要前端人员根据需要自己写以外，其他参数均需从后端获取。最重要的是其中的签名串，有其特定的生成规则，后端需要根据一定的规则，去调用微信的接口，获取相关参数后生成签名串，然后再将对应的参数传给前端。前端人员获取到这些数据信息后，就可以完成配置信息的注入了。

图3-调用配置接口

4)可能会遇到的问题，当在完成配置信息的注入后，实际开始调用所需接口时，出现报错信息：invalid signature，permission denied，此时解决方法如下：

①首选检查生成签名串的算法(规则)是否正确；

② 其次需要特备注意的是：你在利用参数生成签名的时候，要对所有待签名参数按照字段名的 ASCII 码从小到大排序(字典序)后，使用 URL 键值对的格式(即key1=value1&key2=value2…)拼接成字符串 string1。这里需要注意的是所有参数名均为小写字符。

③注意参数key值大小写问题；

④生成签名串时，需要前端人员给后端传当前页面的URL，但不包括'#'hash后面的部分。注意前端传值时的格式以及后端接收时的解析方式。

⑤确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。<