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

最新推荐文章于 2024-06-21 20:56:04 发布

打锤子棒棒糖

最新推荐文章于 2024-06-21 20:56:04 发布

阅读量4.3k

点赞数 4

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

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

版权

微信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&#