后端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、上传组件,未显示上传进度,体验性稍差。