MVC微信浏览器图片上传（img转Base64）

因公司业务需要，需要做一个微信公众号里的图片上传功能，主要用到的技术就是 img转base64 上到服务器

话不多说， 贴代码

先看前端显示出来的东西









OK 图片不重要，看代码

<!--微信图片上传-->
<section class="logo-license">
<div class="half">
<div class="uploader">
<a class="license">
@if (!string.IsNullOrEmpty(Model.ClassImage))
{
<img id="img-1" src="@Model.ClassImage" />
}
else
{
<img id="img-1" src="/images/img_01.png" />
}

</a>
<input id="file0" class="file-3" name="imageData" type="file" width="130" height="130" accept="image/*" />
</div>
<div class="yulan">
<img src="" id="img0">
<div class="enter">
<button class="btn-2 fl">取消</button>
<input type="submit" class="btn-3 fr" value="确定" />
</div>
</div>
</div>
<div class="clear"></div>
</section>

再看js代码

<script>
var subUrl = "";

$("#file0").change(function () {
//获取当前
var objUrl = getObjectURL(this.files[0]);
console.log(this.files[0])
obUrl = objUrl;
console.log("objUrl = " + objUrl);
if (objUrl) {
$("#img0").attr("src", objUrl).show();
}
else {
$("#img0").hide();
}
});

$(function () {
$(".file-3").bind('change', function () {
subUrl = $(this).val();
$(".yulan").show();
$(".file-3").val("");
});

$(".btn-3").click(function () {
$("#img-1").attr("src", obUrl);
$(".yulan").hide();
$(".file-3").parents(".uploader").find(".filename").val(subUrl);

var basepath = "";
var ClassID = $("#ClassID").val();
var TeacherID = $("#TeacherID").val();
var image = new Image();
image.crossOrigin = '';
image.src = obUrl;
image.onload = function () {
basepath = getBase64Image(image);
basepath = basepath.replace(/^data:image\/(png|jpg);base64,/, "")
//开始异步发送
$.ajax("/home/savenewsbackimage", {
data: JSON.stringify({ path: basepath, ClassID: ClassID, TeacherID: TeacherID }),
type: "POST", dataType: "text", contentType: "application/json;utf-8",
success: function (data) {
alert(data);
}
});
}
})
$(".btn-2").click(function () {
$(".yulan").hide();
})
});

function qd() {
var objUrl = getObjectURL(this.files[0]);
obUrl = objUrl;
console.log("objUrl = " + objUrl);
if (objUrl) {
$("#img0").attr("src", objUrl).show();
}
else {
$("#img0").hide();
}
}

function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}

//img转码base64
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
}

</script>

再看服务器端代码

[HttpPost]
public ActionResult SaveNewsBackImage(string path, string ClassID, string TeacherID)
{
//保存图片到服务器，
string basePath = "/UploadPic/";

string imgname = DateTime.Now.Ticks + ".jpg";

string basepath = HttpContext.Server.MapPath(basePath);

string Pic_Path = basepath + imgname;

using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(path);
bw.Write(data);
bw.Close();
}
}

//把图片地址存到数据库

string serpath = ConfigurationManager.AppSettings["Domain"].ToString();
string classimagePath = serpath + basePath + imgname;

var flag = new ClassBLL().SaveNewsBackImage(classimagePath, Convert.ToInt32(ClassID), Convert.ToInt32(TeacherID));
return Content("上传成功");
}

至此， 大家应该能看明白这个微信内置浏览器的上传方法了~ 希望和我一样的朋友， 继续加油，奋斗~ 在路上