<input ref="file" type="file" accept="image/jpeg,image/png" @change="selectImgs" />

<input ref="file" type="file" accept="image/*" @change="selectImgs" />

<input ref="file" type="file" accept="image/*" capture="camera" @change="selectImgs" />

selectImgs () {
 let file = this.$refs.file.files[0]
 lrz(file, { width: 450, fieldName: 'file' }).then((rst) => {
  var xhr = new XMLHttpRequest()
  xhr.open('POST', 'http://xxx.com/upload')

  xhr.onload = () => {
   if (xhr.status === 200 || xhr.status === 304) {
    // 无论后端抛出何种错误，都会走这里
    try {
     // 如果后端跑异常,则能解析成功, 否则解析不成功
     let resp = JSON.parse(xhr.responseText)
     console.log('response: ', resp)
    } catch (e) {
     this.imageUrl = xhr.responseText
    }
   }
  }

  // 添加参数
  rst.formData.append('folder', 'wxAvatar') // 保存的文件夹
  rst.formData.append('base64', rst.base64)
  // 触发上传
  xhr.send(rst.formData)

  return rst
 })
}

<template>
 <div class="imgUploader">
  <section v-if="imageUrl"
       class="file-item ">
   <img :src="/UploadFiles/2021-04-02/imageUrl">

后端图片存储处理


后端api对图片的处理，是必不可少的环节，需要将前端提交过来的base64字符串转换成图片格式，并存放至指定的文件夹，接口返回图片的Url路径。各项目后端对图片的处理逻辑都不一致，以下方案仅供参考(我们使用asp.net MVC 构建了独立的文件存储站点)。
其核心源码,如下:


/// <summary>
/// 图片文件base64上传
/// </summary>
/// <param name="folder">对应文件夹位置</param>
/// <param name="base64">图片文件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、上传组件，未显示上传进度，体验性稍差。
正如前文所述，出于项目实际情况考虑，只是简单实现图片压缩上传功能，如要支持更多的场景，还得细细雕琢。