MVC 微信公众号js-sdk上传图片至自己服务器

最新推荐文章于 2024-01-19 15:48:59 发布

打锤子棒棒糖

最新推荐文章于 2024-01-19 15:48:59 发布

阅读量4.3k

点赞数 4

分类专栏：微信公众号文章标签：微信公众号 MVC JS-SDK

本文链接：https://blog.csdn.net/qq_33022911/article/details/79601412

版权

微信公众号专栏收录该内容

1 篇文章 0 订阅

订阅专栏

微信JS-SDK图片接口调用

本篇将使用.NET MVC介绍微信上传图片至自己服务器

微信公众平台js-sdk官方说明文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

通过文档中微信JS-SDK的概述和JSSDK使用步骤，我们可以了解到微信提供给我们的接口是如何使用的。

图像接口

拍照或从手机相册中选图接口

wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}
});

预览图片接口

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

上传图片接口

wx.uploadImage({
localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
}
});

备注：上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id。

注意到微信只提供给我们上传图片后的ServerId，而已有效期只有3天，所以我们需要将临时素材上传至自己服务器中，serverId即为获取临时素材的MEDIA_ID

请求获取临时素材的接口地址为：

"https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"

现在直接前台代码

@model Senparc.Weixin.MP.Helpers.JsSdkUiPackage
@{
    ViewBag.Title = "微信图片接口Demo";
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>微信图片接口Demo</title>
    <!--jQuery非JS-SDK必须-->
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
    <script src="@(Request.Url.Scheme)://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style type="text/css">
        button {
            width: 100px;
            height: auto;
            display: block;
            margin-bottom: 5px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <button onclick="chooseImage();">选择图片</button>
        <button onclick="uploadImage();">图片上传</button>
        <button onclick="previewImage();">图片预览</button>
        选择的图片<div id="img"></div>
        上传的图片<div id="img2"></div>
    </div>

    <script type="text/javascript">
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '@Model.AppId', // 必填，公众号的唯一标识
            timestamp: '@Model.Timestamp', // 必填，生成签名的时间戳
            nonceStr: '@Model.NonceStr', // 必填，生成签名的随机串
            signature: '@Model.Signature',// 必填，签名
            jsApiList: [
                    'chooseImage',
                    'previewImage',
                    'uploadImage'
            ]
        });
        // 全局变量存储
        var images = {
            localIds: [],
            serverIds: []
        };
        //1.拍照、本地选图
        function chooseImage() {
            if (images.localIds.length == 9) {
                alert('最多允许选中9张图片');
                return;
            }
            else {
                wx.chooseImage({
                    count: 9 - images.localIds.length, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        $(function () {
                            $.each(res.localIds, function (i, n) {
                                images.localIds.push(n);
                                $("#img").append('<img src="' + n + '" style="width:70px; height:70px;margin-right:5px;"/>');
                            });
                        });
                    },
                    cancel: function () {
                        alert("已取消选择");
                    }
                });
            }
        }
        //2.上传图片
        var i = 0, length = 0;
        function uploadImage() {
            i = 0;
            length = 0;
            if (images.localIds.length == 0) {
                alert('请先使用选择图片按钮');
                return;
            }
            length = images.localIds.length;
            upload();
        }
        //递归调用的方法
        function upload() {
            wx.uploadImage({
                localId: images.localIds[i].toString(),
                success: function (res) {
                    images.serverIds.push(res.serverId.toString());
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                },
                complete: function (res) {
                    i++;
                    if (i < length) {
                        upload();
                    }
                    if (i == length) {
                        downloadImage(images.serverIds);
                    }
                }
            });
        }
        //下载图片的方法
        function downloadImage(serverIds) {
            $.get('@Url.Action("DownloadImageAsync")', { mediaArray: JSON.stringify(serverIds) }, function (data) {
                $.each(data, function (i, n) {
                    $("#img2").append('<img src="' + n + '" style="width:70px; height:70px;margin-right:5px;"/>');
                });
                //清空images
                images = {
                    localIds: [],
                    serverIds: []
                };
            }, "json");
        }

        //3.图片预览
        function previewImage() {
            var imgList = [
                  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516438929475&di=b957eeb994395ff6b99ad5a2aa0330f3&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2Fimg013%2Fv4%2F11%2Fd%2F64.jpg',
                  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516438929477&di=ca86274989d88b420edf367a3f5c4ff3&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff4%2F209%2Fd%2F23.jpg',
                  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516438929476&di=bb23036f8232b23f11d7f7226d91ca22&imgtype=0&src=http%3A%2F%2Fnews.shangqiuw.com%2Fupload%2FNews%2F2016-10-14%2F20161014111158277f960f.jpg'
            ];
            wx.previewImage({
                current: imgList[0],
                urls: imgList
            });
        }
        wx.error(function (res) {
            alert(res.errMsg);
        });
    </script>
</body>
</html>

接下来看控制器的代码

using Senparc.CO2NET.Extensions;
using Senparc.Weixin.MP.Helpers;
using System;
using System.Web.Mvc;
using Newtonsoft.Json;
using System.IO;
namespace WebSample.Controllers
{
    using Service;
    using System.Drawing;
    using System.Net.Http;
    using System.Threading.Tasks;
    using System.Collections.Generic;
    public class WeixinJSSDKController : Controller
    {
        //
        // GET: /WeixinJSSDK/
        public ActionResult Index()
        {
            //盛派开源封装的JSSDKHelper类,传递：AppId，Timestamp，NonceStr，Signature
            var jssdkUiPackage = JSSDKHelper.GetJsSdkUiPackage(Config.AppId, Config.AppSecret, Request.Url.AbsoluteUri);
            return View(jssdkUiPackage);
        }

        #region 上传图片下载至自己服务器的方法（异步请求）
        /// <summary>
        /// 上传图片下载至自己服务器的方法（异步请求）
        /// </summary>
        /// <param name="mediaArray"></param>
        /// <returns></returns>
        [HttpGet]
        public ActionResult DownloadImage(string mediaArray)
        {
            List<string> result = new List<string>();
            try
            {
                var mediaIdList = JsonConvert.DeserializeObject<List<string>>(mediaArray);
                string ip_port = Request.Url.Authority;
                foreach (var mediaId in mediaIdList)
                {
                    string path = string.Format("/upload/UploadImage/{0}/", DateTime.Now.ToString("yyyy-MM-dd"));
                    string fileName = Guid.NewGuid().ToString("n") + ".jpg";
                    string mapPath = Server.MapPath(path);
                    var dir = mapPath + fileName;
                    if (!Directory.Exists(mapPath))
                    {
                        Directory.CreateDirectory(mapPath);
                    }
                    using (MemoryStream ms = new MemoryStream())
                    {
                        //关键代码,senparc已经封装好了,这里使用的是media接口
                        Senparc.Weixin.MP.AdvancedAPIs.MediaApi.Get(Config.AppId, mediaId, ms);
                        using (FileStream fs = new FileStream(dir, FileMode.OpenOrCreate, FileAccess.ReadWrite))
                        {
                            ms.Position = 0;
                            byte[] buffer = new byte[5 * 1024 * 1024];
                            int bytesRead = 0;
                            while ((bytesRead = ms.Read(buffer, 0, buffer.Length)) != 0)
                            {
                                fs.Write(buffer, 0, bytesRead);
                            }
                            fs.Flush();
                        }
                        result.Add("https://" + ip_port + path + fileName);
                    }
                }
            }
            catch (Exception ex)
            {
                Senparc.Weixin.WeixinTrace.SendCustomLog("发生错误了", ex.Message);
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 上传图片下载至自己服务器的方法（异步请求）
        /// </summary>
        /// <param name="mediaArray"></param>
        /// <returns></returns>
        [HttpGet]
        public async Task<ActionResult> DownloadImageAsync(string mediaArray)
        {
            List<string> result = new List<string>();
            try
            {
                var mediaIdList = JsonConvert.DeserializeObject<List<string>>(mediaArray);
                string ip_port = Request.Url.Authority;
                foreach (var mediaId in mediaIdList)
                {
                    string path = string.Format("/upload/UploadImage/{0}/", DateTime.Now.ToString("yyyy-MM-dd"));
                    string fileName = Guid.NewGuid().ToString("n") + ".jpg";
                    string mapPath = Server.MapPath(path);
                    var dir = mapPath + fileName;
                    if (!Directory.Exists(mapPath))
                    {
                        Directory.CreateDirectory(mapPath);
                    }
                    using (MemoryStream ms = new MemoryStream())
                    {
                        await Senparc.Weixin.MP.AdvancedAPIs.MediaApi.GetAsync(Config.AppId, mediaId, ms);
                        using (FileStream fs = new FileStream(dir, FileMode.OpenOrCreate, FileAccess.ReadWrite))
                        {
                            ms.Position = 0;
                            byte[] buffer = new byte[5 * 1024 * 1024];
                            int bytesRead = 0;
                            while ((bytesRead = ms.Read(buffer, 0, buffer.Length)) != 0)
                            {
                                fs.Write(buffer, 0, bytesRead);
                            }
                            fs.Flush();
                        }
                        result.Add("https://" + ip_port + path + fileName);
                    }
                }
            }
            catch (Exception ex)
            {
                Senparc.Weixin.WeixinTrace.SendCustomLog("发生错误了", ex.Message);
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        #endregion

    }
}

效果图为：

打锤子棒棒糖

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
18
评论
MVC 微信公众号js-sdk上传图片至自己服务器

微信JS-SDK图片接口调用本篇将使用.NET MVC介绍微信上传图片至自己服务器微信公众平台js-sdk官方说明文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421141115 通过文档中微信JS-SDK的概述和JSSDK使用步骤，我们可以了解到微信提供给我们的接口是如何使用的。图像接口...
复制链接

扫一扫