微信接口上传图片

最新推荐文章于 2023-03-31 18:00:00 发布

Hubert_Biyo

最新推荐文章于 2023-03-31 18:00:00 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/DXB601/article/details/78274988

版权

.NET 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.前端页面：

<div class="fl-fill clearfix pr">
                <span class="fl-indent fl pr">
                @*<p class="pa">☆</p>*@
                证 件 照 </span>
                <button class="btn btn_primary" id="chooseImg">上传证件照</button>
                <input id="ImgUrl" name="ImgUrl" type="hidden" required='required' oninvalid="setCustomValidity('证件照不能为空')" οninput="setCustomValidity('')" class="input fr" value=@ViewBag.ImgUrl />
                <p id="login-Picture" class="pa">上传成功。</p>
                <p id="login-Picture1" class="pa">请上传您的证件照。</p>
                <img src=@ViewBag.ImgUrl />
            </div>

2.Js调用微信上传图片接口

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title style="color:#f18700;"></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, width=device-width, user-scalable=no">
    <base target="_self" />
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    @if (IsSectionDefined("Header"))
    {
        <script src="/Static/js/jquery-1.8.3.min.js"></script>
        <script src="/Static/js/jquery.validate.min.js"></script>
        <script src="/Static/js/jquery.form.js"></script>
        <script src="/Static/js/jquery.metadata.js"></script>
        @RenderSection("Header", false);
    }
    else
    {
        @RenderSection("SuccessHeader", false);
    }
</head>
<body>
    <div class="contaniner">
        @RenderBody()

    </div>
    <script type="text/javascript">

        wx.config({

            debug: false,

            appId: "@(ViewBag.AppId)",

        timestamp: '@(ViewBag.Stamp)',

        nonceStr: '@(ViewBag.Flag)',

        signature: '@(ViewBag.MySignature)',


        jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'getLocation', 'hideMenuItems' ,'chooseImage', 'previewImage', 'uploadImage','downloadImage']    //分享到朋友圈，分享给朋友

        });


        wx.ready(function () {

        //如果使用自定义按钮点击事件来分享，则不需要在ready内调用
        //这里我没有使用自定义按钮，所以需要在ready内调用
        //wx.checkJsApi判断当前客户端版本是否支持指定JS接口,备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。
            wx.checkJsApi({
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'getLocation',
                'hideMenuItems',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage'
            ],
            success: function (res) {  } //alert(JSON.stringify(res));
            });

            //微信上传图片接口
            /*上传图片*/
            $('#chooseImg').click(function () {
                //alert("选择图片")
                wx.chooseImage({
                    count: 1, // 默认9，这里只能选一张照片
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    //sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        // alert(localIds);
                        //得到上传图片的本地id
                        if (upimg(localIds) !== "") {
                            alert("图片上传失败！");
                        }
                    }
                    //特别要注意：微信返回的是weixin://resourceid/d74a9db691e1a0dd0a04694c496eeb96f，上传时候只要最后的ID而img要全部

                });                 //选择照片结束
				 return false;
            });
            //上传到本地服务器
            function downimg(servId, locIds) {

                $.ajax({
                    url: '/Ajax/Ajax_ProjectManager.ashx',
                    type: 'post',
                    dataType: 'text',
                    async: false,
                    data: {"ACCESS_TOKEN":'@(ViewBag.myTicket)', "serverid": servId },
                    beforSend: function () {

                    },
                    success: function (res) {
                        if (res != "") {
                            $("#ImgUrl").val(res);
                            document.getElementById("ImgUrl").innerHTML = res;
                            $("#login-Picture").show();
                            $("#login-Picture1").hide();

                        }
                        else {
                            $("#login-Picture").hide();
                            alert("上传失败！");

                        }

                    },
                    error: function (e) {
                        $("#login-Picture").hide();
                        alert("上传失败！");

                    }
                });

            } //上传图片接口
            function upimg(locIds) {
                var imageurnew = "";
                var localId = locIds.pop(); //pop() 方法用于删除数组的最后一个元素并返回删除的元素。
                //alert("上传图片得到的localid："+localId);
                wx.uploadImage({
                    localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID , res.serverId 就是 media_id，根据它去微信服务器读取图片数据
                        //alert("微信服务器端的照片ID：" + serverId);
                        //loadStart("查询中...", "a", true);
                        setTimeout(function () {
                            //alert("上传图片接口调用完，该上传到服务器中");
                            imageurnew= downimg(serverId, locIds);
                            //alert("上传服务器结束"+imageurnew);

                        }, 1000);

                    }
                });    //上传结束
                return imageurnew;
            }
        });


    </script>

</body>
</html>

3.调用一般处理程序：

using System;
using System.Net;
using System.Web;
using Yasn.Utility;

namespace YasnNY.ajax
{
    /// <summary>
    /// Ajax_ProjectManager 的摘要说明
    /// </summary>
    public class Ajax_ProjectManager : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/jpeg";
            //context.Response.Write("Hello World");
            string MEDIA_ID = context.Request.Params["serverid"];
            string ACCESS_TOKEN = context.Request.Params["ACCESS_TOKEN"];
            Utils.WriteLog("ACCESS_TOKEN"+ ACCESS_TOKEN+ "       MEDIA_ID为：" + MEDIA_ID);
            string msg=InsertImg(ACCESS_TOKEN, MEDIA_ID);
            context.Response.Write(msg);
        }
        public string  InsertImg(string ACCESS_TOKEN, string MEDIA_ID)
        {
            Utils.WriteLog("进入上传图片到服务器方法");
            string file = string.Empty;
            string content = string.Empty;
            string strpath = string.Empty;
            string savepath = string.Empty;
            string stUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" + ACCESS_TOKEN + "&media_id=" + MEDIA_ID;
            HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create(stUrl);

            Utils.WriteLog("图片路径："+ stUrl);
            req.Method = "GET";
            using (WebResponse wr = req.GetResponse())
            {
                HttpWebResponse myResponse = (HttpWebResponse)req.GetResponse();

                strpath = myResponse.ResponseUri.ToString();

                Utils.WriteLog("接收类别:" + myResponse.ContentType);
                WebClient mywebclient = new WebClient();
                savepath = System.Web.HttpContext.Current.Server.MapPath("Image")+ "\\"+ DateTime.Now.ToString("yyyyMMddHHmmssfff") + (new Random()).Next().ToString().Substring(0, 4) + ".jpg";
                Utils.WriteLog("路径" + savepath);
                try
                {
                    //下载到服务器
                    mywebclient.DownloadFile(strpath, savepath);
                    file = savepath;
                }
                catch (Exception ex)
                {
                    savepath = ex.ToString();
                }

            }
            Utils.WriteLog("文件:" + file.Substring(10) );
            Utils.SetCookie("UploadURL", file.Substring(10));
            return file.Substring(10);
            
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}