js使用微信上传图片功能

在说上传图片之前，先说一下准备工作，其实在上一篇微信分享功能那篇文章已经说过了，就是使用wx.config里面去把appId、timestamp、nonceStr、signature这四个参数的值给加上，这些准备工作跟分享是一样的，微信目前开放的那些方法和功能，基本都是这样的准备工作，所以，这里就不在说了，想了解的话就去分享的那篇文章看一下吧。（https://blog.csdn.net/weixin_41257563/article/details/88666588）

接下来就直接开始上传图片的功能的讲解：
上传图片相关的方法有:chooseImage(选择)、uploadImage(上传)、previewImage(预览)、downloadImage(下载)、getLocalImgData(获取本地图片)。

准备工作：

wx.config({
       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
       appId: 'wx7cf1ecf390e65700', // 必填，公众号的唯一标识
       timestamp: '1500279422', // 必填，生成签名的时间戳
       nonceStr: 'lilb1ozkin4yc2q98v82nysv7u663w4z', // 必填，生成签名的随机串
       signature: '3662a152800222194c0ef1f9a1f146e650ac2774',// 必填，签名
       jsApiList: [
              'uploadImage',
              'previewImage',
              'chooseImage',
              'downloadImage',
              'getLocalImgData'
        ] // 必填，需要使用的JS接口列表
});

$("#btn").on('click',function () {
  wx.checkJsApi({
       jsApiList: [
             'uploadImage',
             'previewImage',
             'chooseImage',
             'downloadImage',
             'getLocalImgData'
      ],
     success: function (res) {
         // alert(JSON.stringify(res));
     }
});
  //选择图片
    wx.chooseImage({
            count: 1, // 默认9，1-9张
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                     var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                     $("img").attr('src', localIds);
                     //上传图片
                     wx.uploadImage({
                             localId: ''+ localIds +'', // 需要上传的图片的本地ID，由chooseImage接口获得 
                             isShowProgressTips: 1, // 默认为1，显示进度提示
                             success: function (res) {
                                        var serverId = res.serverId; // 返回图片的服务器端ID
                
                                        //下载图片
                                        wx.downloadImage({
                                                 serverId: ''+ serverId +'', // 需要下载的图片的服务器端ID，由uploadImage接口获得
                                                 isShowProgressTips: 1, // 默认为1，显示进度提示
                                                 success: function (res) {
                                                         var localId1 = res.localId; // 返回图片下载后的本地ID
                                                         alert(localId1);
                                                 }
                                       });
                              }
                      });
           }         
   });
})；

这个例子里面，我只使用了三个方法，即：wx.chooseImage(选择)、wx.uploadImage(上传)、 wx.downloadImage(下载)。

这个例子的逻辑大概就是这样的：
1、首先选择图片，目前配置的是选择1张，选择图片的方法会返回一个res.localIds字段，这个字段就是图片的id，并且这个字段可以放在img里面去渲染的。
ps：也可以选择多个图片，返回的res.localIds使用逗号分隔的，可以去处理一下。

2、当拿到res.localIds字段后，我们就要把图片上传一下，这里的上传是指上传到微信的服务器，上传成功后会返回一个res.serverId，这就是图片在微信里的图片id。
ps：需要注意的是，上传到微信服务器后，微信只会帮助我们保存三天，所以，我们要把图片转到我们自己的服务器。

3、当拿到微信返回的serverId后，我们就要把图片下载到本地，当下载完成后，会返回一个localld，这就是本地id，但是，需要注意的是，这时候只是下载到了我们的本地，并没有下载到我们的服务器中，所以，接下来还会执行一个逻辑。
4、拿到本地id后，就需要后端同学配合了，后端同学给我们一个接口，我们去请求，然后把下载到本地的图片id传给他，他通过后台的方法拿到，并找到图片，然后存到服务器中，这里要做的是，后端得帮助我们上传一下，然后通过接口返回我们file_id,这个就是在我们自己服务器的图片id。
ps：上面那段代码里还没有加这个逻辑，但是跟后台已沟通过，并且也测试过，只是没有用接口来传输本地id而已，

这次没有使用预览和获取本地图片的方法，但也大致的说一下。

//预览图片
 wx.previewImage({
    current: '', // 当前显示图片的http链接
    urls: [] // 需要预览的图片http链接列表
});

ps：如果要使用预览图片的方法，就不能使用选择图片方法返回的那个id去预览，要使用http链接才可以，所以，这部操作就得在将图片传到我们自己服务器后，才可以拿到http的图片链接。

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

ps:其实这个接口是为了在ios下的webview中，不支持使用 localId 直接显示图片的问题的解决方案，就是把那个localId传个这个方法，然后他会返回我们一个base64格式的图片，以便我们在img里显示。

以上就是微信上传图片的相关功能，因为研究的还不是太深，所以理解的可能没有那么深，只是将自己目前的理解和实践得出的观点阐述一下，有可以优化或者理解不对的地方，欢迎指出。

ps:这里已经分享了两篇关于微信JSSDK中的方法了，一个分享功能，一个上传图片功能，个人觉得这两个功能都是使用频率较高的两个方法，其他一些不常用的也大致看了一下，例如：地图功能、按钮显示问题、录音功能等等，这里就不再一一赘述了，因为这些方法吧，它除了功能本身的方法外，其他都是一样的，比如上面所说的准备工作，而功能本身的问题，当准备工作没问题以后，就直接调用功能的方法，逐一去测试，去验证，按着自己的思路走就行