調用微信網頁開發接口上傳圖片

 <div style="font-size:18px;margin-left:5px;color:#727071">團隊風采<span style="font-size:12px;margin-left:20px">(最多5張照片)</span></div>
            <div class="form-group" style="margin:0 15px;">
                
                <div class="row piccontainer">

                    <div class="col-xs-6" id="picdiv" onclick="uploadImge()">

                        <img src="~/Content/img/WeiXin/Addpng.png" class="picimg" />

                    </div>

                </div>
            
                <input type="hidden" name="PicPath" value="" id="PicPath" />
            </div>

后台需要用到的方法

//Action里執行一下就可以了 
private void PrepareArg()
        {
            //  return;
            var url = Request.Url.ToString();
            var timestamp = CommonUtil.ConvertDateTimeInt(DateTime.Now).ToString();
            var nonceStr = CommonUtil.RndString(10);
            var signature = WeChatClient.GetJsSignature(url, nonceStr, timestamp);
            ViewBag.timestamp = timestamp;
            ViewBag.nonceStr = nonceStr;
            ViewBag.signature = signature;
        }

  public ActionResult UploadImge(string serverId)//原圖
        {
            var headPath = "/UploadImage/" + DateTime.Now.ToString("yyyyMM");
            string AbsoluteFilePath = Server.MapPath(headPath);
            if (!Directory.Exists(AbsoluteFilePath))
            {
                Directory.CreateDirectory(AbsoluteFilePath);
            }
            string imgPath = headPath + "/" + DateTime.Now.ToString("yyyyMMddHHmm") + serverId + ".jpg";
            string AbsolutePath = Server.MapPath(imgPath);
            WeChatClient.SaveMultimedia(serverId, AbsolutePath);


            return Json(imgPath);

        }

        public ActionResult UploadImge2(string serverId)//按3比4比例裁剪
        {
            var headPath = "/UploadImage/" + DateTime.Now.ToString("yyyyMM");
            string AbsoluteFilePath = Server.MapPath(headPath);
            if (!Directory.Exists(AbsoluteFilePath))
            {
                Directory.CreateDirectory(AbsoluteFilePath);
            }
            string imgPath = headPath + "/" + DateTime.Now.ToString("yyyyMMddHHmm") + serverId + ".jpg";
            string AbsolutePath = Server.MapPath(imgPath);

            WeChatClient.SaveMultimedia(serverId, AbsolutePath);

            CommonUtil.MakeThumbnail(AbsolutePath, AbsolutePath.Replace(".jpg", "_2.jpg"),3, 4);
            return Json(imgPath);

        }
        public ActionResult UploadImge3(string serverId)//按4比3裁剪
        {
            var headPath = "/UploadImage/" + DateTime.Now.ToString("yyyyMM");
            string AbsoluteFilePath = Server.MapPath(headPath);
            if (!Directory.Exists(AbsoluteFilePath))
            {
                Directory.CreateDirectory(AbsoluteFilePath);
            }
            string imgPath = headPath + "/" + DateTime.Now.ToString("yyyyMMddHHmm") + serverId + ".jpg";
            string AbsolutePath = Server.MapPath(imgPath);

            WeChatClient.SaveMultimedia(serverId, AbsolutePath);

            CommonUtil.MakeThumbnail(AbsolutePath, AbsolutePath.Replace(".jpg", "_3.jpg"), 4, 3);
            return Json(imgPath);

        }

CommonUtil里裁剪圖片方法

 public static void MakeThumbnail(string originalImagePath, string thumbnailPath, int bw = 4, int bh = 3)
        {
            try
            {
                Image originalImage = Image.FromFile(originalImagePath);
                var bl = originalImage.Height * 1.00 / originalImage.Width;
                int orgWith, orgHeight, startY = 0, startX = 0, newWith, newHeight = 0;
                var bd = bh * 1.00 / bw;
                if (bl > bd)
                {
                    orgWith = originalImage.Width;
                    orgHeight = (int)(originalImage.Width * bh / bw);
                    startY = (originalImage.Height - orgHeight) / 2;
                    newWith = orgWith;
                    if (newWith > 720)
                    {
                        newWith = 720;
                    }
                    newHeight = (int)(newWith * bh / bw);

                }
                else
                {
                    orgWith = originalImage.Height * bw / bh;
                    orgHeight = originalImage.Height;
                    startX = (originalImage.Width - orgWith) / 2;
                    newWith = orgWith;
                    if (newWith > 720)
                    {
                        newWith = 720;
                    }
                    newHeight = (int)(newWith * bh / bw);
                }


                Bitmap destBitmap = new Bitmap(newWith, newHeight);//目標圖
                Rectangle destRect = new Rectangle(0, 0, newWith, newHeight);//矩形容器
                Rectangle srcRect = new Rectangle(startX, startY, orgWith, orgHeight);

                var g = Graphics.FromImage(destBitmap);
                //設置高質量插值法 
                g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
                //設置高質量,低速度呈現平滑程度 
                g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
                //清空畫布並以透明背景色填充 
                g.Clear(Color.Transparent);

                try
                {
                    g.DrawImage(originalImage, destRect, srcRect, GraphicsUnit.Pixel);
                    destBitmap.Save(thumbnailPath, originalImage.RawFormat);
                }
                catch (System.Exception e)
                {

                }
                finally
                {
                    originalImage.Dispose();
                    destBitmap.Dispose();
                    g.Dispose();
                }

            }
            catch (Exception)
            {


            }
        }

頁面調用js方法

  <script src="~/Scripts/jweixin-1.2.0.js"></script>
    <script>
        var uploadNum = 0;
        wx.config({
            debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
            appId: '********', // 必填，公眾號的唯一標識
            timestamp: '@(ViewBag.timestamp)', // 必填，生成簽名的時間戳
            nonceStr: '@(ViewBag.nonceStr)', // 必填，生成簽名的隨機串
            signature: '@(ViewBag.signature)',// 必填，簽名，見附錄1
            jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
        });



        function uploadImge() {
            var ttnum = 5 - uploadNum;
            wx.chooseImage({
                count: ttnum, // 默認9
                sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
                sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片
                    uploadImg(localIds, 0);
                }
            });
        }

        function uploadImg(localIds, num) {
            if (localIds.length <= num) {
                return;
            }
            var localId = localIds[num];

            wx.uploadImage({
                localId: localId, // 需要上傳的圖片的本地ID，由chooseImage接口獲得
                isShowProgressTips: 1, // 默認為1，顯示進度提示
                success: function (sres) {
                    var serverId = sres.serverId; // 返回圖片的服務器端ID
                    $.post("/WeiXin/Home/UploadImge2", { serverId: serverId }, function (data) {
                        var picPath = $("#PicPath").val();
                        if (picPath == "") {
                            picPath = data;
                        } else {
                            picPath = picPath + "," + data;
                        }
                        $("#PicPath").val(picPath);

                        var temphtml = "";

                        if (window.__wxjs_is_wkwebview) {
                            wx.getLocalImgData({
                                localId: localId, // 圖片的localID
                                success: function (res) {
                                    var localData = res.localData; // localData是圖片的base64數據，可以用img標簽顯示
                                    temphtml = '<div class="col-xs-6"><img src="/Content/img/叉-m.png" style="width:20px;height:20px;position:absolute;z-index:2;right:15px;" onclick="delimg(this,\'' + data + '\')"/><img src="' + localData + '" class="picimg" style="z-index:1;position:absolute"/>';

                                    $("#picdiv").before(temphtml);
                                    uploadNum = uploadNum + 1;
                                    if (uploadNum >= 5) {
                                        $("#picdiv").hide();
                                    }
                                    uploadImg(localIds, num + 1)
                                }
                            });
                        } else {
                            temphtml = '<div class="col-xs-6"><img src="/Content/img/叉-m.png" style="width:20px;height:20px;position:absolute;z-index:2;right:15px;" onclick="delimg(this,\'' + data + '\')"/><img src="' + localId + '" class="picimg" style="z-index:1;position:absolute"/>';
                            $("#picdiv").before(temphtml);
                            uploadNum = uploadNum + 1;
                            if (uploadNum >= 5) {
                                $("#picdiv").hide();
                            }
                            uploadImg(localIds, num + 1)
                        }
                    })


                }
            });

        }
        function delimg(obj,path)
        {

            if (confirm("確定刪除？")) {
                $(obj).parent().remove();
                var picPath = $("#PicPath").val();

                var str = "";
                if (picPath == "" || picPath.indexOf(',') == -1) {
                    picPath = "";
                } else {
                    var patharray = picPath.split(',');
                    for(var i=0;i<patharray.length;i++)
                    {

                        if (patharray[i] != path)
                        {
                            str = str + patharray[i] + ",";
                        }

                    }
                    str = str.substring(0, str.length - 1);
                    picPath = str;
                }

                $("#PicPath").val(picPath);
                uploadNum = uploadNum - 1;
            }

        }

</script>

效果展示