调用微信网页开发接口上传图片

<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>

效果展示