微信公众号第三方h5页面实现图片上传（vue）

在这里实现这个功能用到了微信提供的'chooseImage','uploadImage','previewImage'三个JSApi;
针对微信官方提供的为了兼容ios图片显示问题使用到getLocalImgData，我个人不推荐使用，原因有：
1）针对ios系统还要单独写一堆代码为了显示，使代码逻辑复杂，容易混乱；
2）如果多张图片上传还要单独多遍历循环使用getLocalImgData得到对应显示路径，影响效率；
3）好奇的可以自己尝试下，通过getLocalImgData得出的显示路径简直是超级超级超级无敌无敌无敌长的路径，如果是多张图片，简直是噩梦；
综上所述，不建议使用getLocalImgData，但如果需求真的必须需要，可自行了解。在这里，我针对ios与Android兼容显示图片的问题的解决方式是和后台小哥达成一致，我所有显示的路径是通过调用后台接口返回的图片路径，在浏览器中可以看到的，这样就解决了兼容性显示的问题，代码上也简洁许多并且不易产生bug，并且相对编辑逻辑的操作也非常方便；
首先，以上用到的jsApi通过config验证后（针对ios与Android鉴权验证兼容代码可在我“ios与Android兼容问题整理”https://www.jianshu.com/writer#/notebooks/47203649/notes/75037739
中查看），上传图片代码如下：

节点部分：（本文使用的UI组件库是vant）
<template>
    <div>
        <van-row gutter="10">
             <van-col span="8" v-for="(item,index) in photoList" :key="index" class="photo-item" @click="preview(item,photoList)">
                  <div class="photo-box">
                       <img :src="item" class="detail-img img-fit"/>
                       <img src="../../assets/my/del-photo.png" class="del-photo" @click="delPhoto(index)">
                  </div>
              </van-col>
              <van-col v-if="photoList.length<9" span="8" class="photo-item" @click="uploadPhoto">
                   <div class="photo-box">
                        <div class="detail-img upload-photo">
                            <img src="../../assets/my/photo.png" class="upload-icon">
                            <div>添加图片</div>
                        </div>
                   </div>
              </van-col>
              <van-col span="8" class="photo-item"></van-col>
              <van-col span="8" class="photo-item"></van-col>
         </van-row>
    </div>
</template>

<script>
import wx from 'weixin-js-sdk';
//这里有一个小坑，就是第三方页面使用依赖库就使用weixin-js-sdk是最全的，不要使用其他的库类似于weixin-jsApi等，
//不全，有的微信接口使用不了；npm i weixin-js-sdk即可
export default {
    data(){
        return{
            photoList:[],
            serverIds:[],
            uploadNum:9,
        }
    },
    methods:{
        uploadPhoto(){
            let self=this;
            let count=this.uploadNum-this.photoList.length;  //此处用来控制图片最多上传个数，本文是9
            wx.ready(function(){  //点击触发上传，此处可不加 ready
                wx.chooseImage({
                    count: count,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success: function (res) {
                        self.serverIds=[];
                        self.uploadWXPhoto(res.localIds);
                    },
                    fail:function (res) {
                        console.log("chooseImage",res)
                    }
                });
            });
        },
        uploadWXPhoto(localIds){
            let localId = localIds.pop();
            let self=this;
//上传图片得到serverId是我与后台达成的逻辑，他需要serverId，然后他那边实现图片下载并返回我可显示图片路径，
//这样我兼容性显示，编辑，存储的逻辑都可以使用一个数组（photoList）完成，逻辑清晰代码简洁不易出现bug,如果可以建议大家也这样操作；
            wx.uploadImage({
                localId: localId.toString(),
                isShowProgressTips: 1,
                success: function (res) {
                    self.serverIds.push(res.serverId);
                    if(localIds.length > 0){
                        self.uploadWXPhoto(localIds); //一定要采取这种重复调用方法的方式实现多图片上传，通过数组遍历的方式重复调用是不生效的！
                    }else {
                        api.photoUpdate({
                            mediaId:self.serverIds
                        }).then(res=>{
                            self.photoList=self.photoList.concat(res.data);
                        });
                    }
                }
            });
        },
        delPhoto(index){
            this.photoList.splice(index,1);
        },
        preview(image,images){
            wx.previewImage({
                current: image,//当前显示的图片
                urls: images //图片数组
            });
        },
    }
}
</script>

希望以上可帮助大家，个人吐槽写第三方嵌入页面真心好累，光兼容的坑就是一个接一个，微信提供的接口也不完全，还要配置域名文档，域名也是严格要求的，烦的一批，还不如写个小程序来的自在；