接到一个开发任务，需要上传手机照片到自己的服务器，并使用微信JSSDK接口，将即将上传的图片显示到手机页面上，点击上传才能上传，如果照片选中了需要删除，可以在页面上删除。
我参考了一篇博客写的不错：https://blog.csdn.net/sinat_35861727/article/details/72722243
大体是根据这篇博客写的，对于安卓手机和苹果手机都适用，但是我发现大多数只能根据一张图片的localId显示，如果要显示多张，并能够删除，需要进行递归操作,在uploadImage代码里面递归：
选中后显示在article里面：

 <article id="pics" class="middleBlock" >
 </article>

这里是js，选择图片后显示在手机屏幕上的代码：
  wx.chooseImage({
                count: 9,
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'],
                success: function (res){
                localIds = res.localIds;
                    //2.显示图片
                    if (window.__wxjs_is_wkwebview){
                        //判断当前使用的webview内核
                        //获取本地图片,此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题
                        $.each(localIds, function (i, item) {
                            wx.getLocalImgData({
                                //苹果手机用localData显示照片，img标签显示图片
                                localId: item, // 图片的localID
                                success: function (res) {
                                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                    //iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
                                    localData = localData.replace('jgp', 'jpeg');
                                    //如果选中了图片，就加在#pics标签里面
                                    if(a!=0){
                                        $("#pics").append('<img  id=' + b + ' src="' + localData + '"/>');
                                        $("#pics").append('<div class="Pics_div" onclick="delPic(' + b + ')" id=' + b + '><span>×</span></div> ');
                                        SumLocalIds.push(localData);
                                        if(localIds.length>0){
                                            b++;
                                        }
                                    }else{
                                        $("#pics").append('<img id=' + i + ' src="' + localData + '"/>');
                                        $("#pics").append('<div class="Pics_div" onclick="delPic(' + i + ')" id=' + i + '><span>×</span></div> ');
                                        SumLocalIds.push(localData);
                                        if(localIds.length>0){
                                            b++;
                                        }
                                    }
                                }
                            });
                        });
                        $("#uplaodBtn").removeAttr("disabled");
                        a++;
                    }else{
                        $.each(localIds, function (i, item){
                            //最多只能上传的照片数量
                            if(a!=0){ //不是第一次点击上传按钮
                                $("#pics").append('<img id=' + b + ' src="' + item + '"/>');
                                $("#pics").append('<div class="Pics_div" onclick="delPic(' + b + ')"  id=' +b+ '><span>×</span></div> ');
                                SumLocalIds.push(item);
                                b++;
                            }else{
                                $("#pics").append('<img id=' + i + ' src="' + item + '"/>');
                                $("#pics").append('<div  class="Pics_div" onclick="delPic(' + i + ')" id=' + i + '><span>×</span></div> ');
                                SumLocalIds.push(item);
                                b++;
                            }
                        });
                        $("#uplaodBtn").removeAttr("disabled");
                        a++;
                    }
                }
            });
           ```
下面是删除图片的操作：

  function delPic(i) {
                $("#pics").find("img[id='"+i+"']").remove();
                $("#pics").find("div[id='"+i+"']").remove();
                $("#uplaodBtn").removeAttr("disabled");
                SumLocalIds.splice(i, 1,'xx');//这里是先替换成xx，后来再查找出来删除所有localId为xx的localId.
    }
下面是上传图片到微信服务器：
 wx.uploadImage({
            localId: localId.toString(),  // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 0, // 默认为1，显示进度提示
            success: function (res) {
                var serverId = res.serverId;
                serverIds.push(serverId);
                res.serverId;   // 返回图片的服务器端ID
                if(localIds.length > 0){
                    syncUpload(localIds); 
                }else {
                    //从服务器拉取照片到本地服务器
                    saveServerId(serverIds);
                }
            }
        });
    ``````