后端api对图片的处理，是必不可少的环节，需要将前端提交过来的base64字符串转换成图片格式，并存放至指定的文件夹，接口返回图片的Url路径。各项目后端对图片的处理逻辑都不一致，以下方案仅供参考(我们使用asp.net MVC 构建了独立的文件存储站点)。
其核心源码,如下:
/// <summary>
/// 图片文件base64上传
/// </summary>
/// <param>对应文件夹位置</param>
/// <param>图片文件base64字符串</param>
/// <returns></returns>
public ActionResult Base64FileUpload(string folder, string base64)
{
var context = System.Web.HttpContext.Current;
context.Response.ClearContent();
// 因为前端调用时，需要做跨域处理
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
context.Response.AddHeader("Access-Control-Allow-Headers", "content-type");
context.Response.AddHeader("Access-Control-Max-Age", "30");
if (context.Request.HttpMethod.Equals("OPTIONS"))
{
return Content("");
}
var resultStr = base64.Substring(base64.IndexOf(",") + 1);//需要去掉头部信息，这很重要
byte[] bytes = Convert.FromBase64String(resultStr);
var fileName = Guid.NewGuid().ToString() + ".png";
if (folder.IsEmpty()) folder = "folder";
//本地上传
string root = string.Format("/Resource/{0}/", folder);
string virtualPath = root + fileName;
string path = Server.MapPath("~" + virtualPath);
//创建文件夹
if (!Directory.Exists(Path.GetDirectoryName(path)))
{
Directory.CreateDirectory(Path.GetDirectoryName(path));
}
System.IO.MemoryStream ms = new System.IO.MemoryStream(bytes);//转换成无法调整大小的MemoryStream对象
System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(ms);
bitmap.Save(path, System.Drawing.Imaging.ImageFormat.Png);//保存到服务器路径
ms.Close();//关闭当前流，并释放所有与之关联的资源
return Content(Net.Url + virtualPath); //返回文件路径
}
结语
由于项目实际情况，上述的方案中还存在诸多未完善的点:
1、多张图片上传，还是采用的与单张图片相同的接口处理, 更为完善的方案是，前端的多图上传组件只绑定一个关联Id，即可通过实现上传和将图片列表查询展示(注:该功能在微信端未实现)。
2、后端图片上传的接口，未做严格的安全校验，更为完善的方案是，每个上传的场景，都应该限制文件类型，限制文件大小，以及文件数据来源校验(注: 如软件需要按二级等保标准测评，则后端接口会检测通不过)。
3、上传组件，未显示上传进度，体验性稍差。
正如前文所述，出于项目实际情况考虑，只是简单实现图片压缩上传功能，如要支持更多的场景，还得细细雕琢。
参考
1、移动端H5实现图片上传
2、安卓版微信 input onchange事件不生效
