這篇文章主要介紹如何使用vue+axios+lrz.js實(shí)現(xiàn)微信端圖片壓縮上傳方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運(yùn)營等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,創(chuàng)造更大的價(jià)值。

業(yè)務(wù)場(chǎng)景

微信端項(xiàng)目是基于Vux + Axios構(gòu)建的，關(guān)于圖片上傳的業(yè)務(wù)場(chǎng)景有以下幾點(diǎn)需求:

1、單張圖片上傳(如個(gè)人頭像,實(shí)名認(rèn)證等業(yè)務(wù))

2、多張圖片上傳(如某類工單記錄)

3、上傳圖片時(shí)期望能按指定尺寸壓縮處理

4、上傳圖片可以從相冊(cè)中選擇或者直接拍照

遇到的坑

采用微信JSSDK上傳圖片

在之前開發(fā)的項(xiàng)目中(mui + jquery)，有使用過微信JSSDK的接口上傳圖片，本想應(yīng)該能快速遷移至此項(xiàng)目。事實(shí)證明編程沒有簡(jiǎn)單的事:

1、按指定尺寸壓縮圖片

JSSDK提供的接口wx.chooseImage 是不能指定圖片壓縮尺寸的,只能在后端的接口通過localId獲取圖片時(shí)，再轉(zhuǎn)換成指定的尺寸。

2、微信JSSDK的接口權(quán)限驗(yàn)證

只要是單頁面應(yīng)用項(xiàng)目，微信JSSDK注入權(quán)限驗(yàn)證都會(huì)有這個(gè)坑，而這個(gè)與路由模式(hash 或 history)也有關(guān)聯(lián)。有關(guān)此坑， 后續(xù)會(huì)再次寫文總結(jié)。參考解決方案 [微信JSSDK] 解決SDK注入權(quán)限驗(yàn)證 安卓正常，IOS出現(xiàn)config fail

經(jīng)過權(quán)衡考慮網(wǎng)頁可能需要在微信以外的瀏覽器上也能上傳文件，顧后來放棄了采用微信JSSDK接口上傳圖片的方式。

android版微信,input onchange事件不觸發(fā)

這個(gè)坑，圈內(nèi)有很多人踩過了。在PC端測(cè)試是正常的，發(fā)布之后，微信端上傳時(shí)能選擇文件，但之后沒有任何效果。日志跟蹤，后臺(tái)的api都未調(diào)用，由此判斷是input的onchange事件未被觸發(fā)。

解決方案, 更改input的 accept屬性：

將以上代碼更改為:

如果不允許從相冊(cè)中選擇，只能拍照，增加capture="camera"：

(注:如果場(chǎng)景支持從相冊(cè)選擇或拍照，測(cè)試發(fā)現(xiàn)某些機(jī)型拍照后返回到了主頁。哈哈，也有可能是其他因素引起的問題，未做深究了)

使用Lrz.js壓縮圖片

目前手機(jī)拍照的圖片文件大小一般在3-4M，如果在上傳時(shí)不做壓縮處理會(huì)相當(dāng)浪費(fèi)流量并且占用服務(wù)器的存儲(chǔ)空間(期望上傳原圖的另做討論)。如果能夠在前端壓縮處理，那肯定是最理想的方案。而 lrz.js 則提供了前端圖片文件的壓縮方案，并且可以指定尺寸壓縮。實(shí)測(cè):3M左右的圖片文件，按寬度450px尺寸壓縮上傳后的文件大小在500kb左右，上傳時(shí)間2s以內(nèi)。

其核心源碼，如下:

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) {
    // 無論后端拋出何種錯(cuò)誤，都會(huì)走這里
    try {
     // 如果后端跑異常,則能解析成功, 否則解析不成功
     let resp = JSON.parse(xhr.responseText)
     console.log('response: ', resp)
    } catch (e) {
     this.imageUrl = xhr.responseText
    }
   }
  }

  // 添加參數(shù)
  rst.formData.append('folder', 'wxAvatar') // 保存的文件夾
  rst.formData.append('base64', rst.base64)
  // 觸發(fā)上傳
  xhr.send(rst.formData)

  return rst
 })
}

單個(gè)圖片上傳組件完整代碼，如下(注: icon圖標(biāo)使用的是svg-icon組件):

.imgUploader {
 margin-top: 0.5rem;
 .file-item {
  float: left;
  position: relative;
  width: 100px;
  text-align: center;
  left: 2rem;
  img {
   width: 100px;
   height: 100px;
   border: 1px solid #ececec;
  }
  .file-remove {
   position: absolute;
   right: 0px;
   top: 4px;
   width: 14px;
   height: 14px;
   color: white;
   cursor: pointer;
   line-height: 12px;
   border-radius: 100%;
   transform: rotate(45deg);
   background: rgba(0, 0, 0, 0.5);
  }

  &:hover .file-remove {
   display: inline;
  }
  .file-name {
   margin: 0;
   height: 40px;
   word-break: break-all;
   font-size: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
  }
 }
 .add {
  width: 100px;
  height: 100px;
  float: left;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
  cursor: pointer;
  border: 1px dashed #40c2da;
  color: #40c2da;
  position: relative;
  background: #ffffff;
  .icon {
   font-size: 1.4rem;
   color: #7dd2d9;
   vertical-align: -0.25rem;
  }
  .text {
   font-size: 1.2rem;
   color: #7dd2d9;
   vertical-align: 0.25rem;
  }
 }
}
input[type="file"] {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 border: 1px solid #000;
 opacity: 0;
}

后端圖片存儲(chǔ)處理

后端api對(duì)圖片的處理，是必不可少的環(huán)節(jié)，需要將前端提交過來的base64字符串轉(zhuǎn)換成圖片格式，并存放至指定的文件夾，接口返回圖片的Url路徑。各項(xiàng)目后端對(duì)圖片的處理邏輯都不一致，以下方案僅供參考(我們使用asp.net MVC 構(gòu)建了獨(dú)立的文件存儲(chǔ)站點(diǎn))。

其核心源碼,如下:

/// 

/// 圖片文件base64上傳
/// 
/// 對(duì)應(yīng)文件夾位置
/// 圖片文件base64字符串
/// 
public ActionResult Base64FileUpload(string folder, string base64)
{
  var context = System.Web.HttpContext.Current;
  context.Response.ClearContent();
  // 因?yàn)榍岸苏{(diào)用時(shí)，需要做跨域處理
  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);
  //創(chuàng)建文件夾
  if (!Directory.Exists(Path.GetDirectoryName(path)))
  {
    Directory.CreateDirectory(Path.GetDirectoryName(path));
  }
  System.IO.MemoryStream ms = new System.IO.MemoryStream(bytes);//轉(zhuǎn)換成無法調(diào)整大小的MemoryStream對(duì)象
  System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(ms);
  bitmap.Save(path, System.Drawing.Imaging.ImageFormat.Png);//保存到服務(wù)器路徑
  ms.Close();//關(guān)閉當(dāng)前流，并釋放所有與之關(guān)聯(lián)的資源
  return Content(Net.Url + virtualPath); //返回文件路徑
}

以上是“如何使用vue+axios+lrz.js實(shí)現(xiàn)微信端圖片壓縮上傳方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：如何使用vue+axios+lrz.js實(shí)現(xiàn)微信端圖片壓縮上傳方法-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://weahome.cn/article/djcdds.html