怎么使用vue實現微信端圖片壓縮上傳

這篇文章主要介紹“怎么使用vue實現微信端圖片壓縮上傳”，在日常操作中，相信很多人在怎么使用vue實現微信端圖片壓縮上傳問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用vue實現微信端圖片壓縮上傳”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

業務場景

微信端項目是基于Vux + Axios構建的，關于圖片上傳的業務場景有以下幾點需求:

1、單張圖片上傳(如個人頭像,實名認證等業務)

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

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

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

遇到的坑

采用微信JSSDK上傳圖片

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

1、按指定尺寸壓縮圖片

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

2、微信JSSDK的接口權限驗證

只要是單頁面應用項目，微信JSSDK注入權限驗證都會有這個坑，而這個與路由模式(hash 或 history)也有關聯。

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

android版微信,input onchange事件不觸發

這個坑，圈內有很多人踩過了。在PC端測試是正常的，發布之后，微信端上傳時能選擇文件，但之后沒有任何效果。日志跟蹤，后臺的api都未調用，由此判斷是input的onchange事件未被觸發。

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

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

將以上代碼更改為:

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

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

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

使用Lrz.js壓縮圖片

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

其核心源碼，如下:

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
 })
}

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

<template>
 <div class="imgUploader">
  <section v-if="imageUrl"
       class="file-item ">
   <img :src="imageUrl"
      alt="">
   <span class="file-remove"
      @click="remove()">+</span>
  </section>
  <section v-else
       class="file-item">
   <div class="add">
    <svg-icon v-if="!text"
         class="icon"
         icon-class="plus" />
    <span v-if="text"
       class="text">{{text}}</span>
    <input type="file"
        accept="image/*"
        @change="selectImgs"
        ref="file">
   </div>
  </section>
 </div>
</template>

<script>
import lrz from 'lrz'
export default {
 props: {
  text: String,
  // 壓縮尺寸,默認寬度為450px
  size: {
   type: Number,
   default: 450
  }
 },
 data () {
  return {
   img: {
    name: '',
    src: ''
   },
   uploadUrl: 'http://ff-ff.xxx.cn/UploaderV2/Base64FileUpload',
   imageUrl: ''
  }
 },
 watch: {
  imageUrl (val, oldVal) {
   this.$emit('input', val)
  },
  value (val) {
   this.imageUrl = val
  }
 },
 mounted () {
  this.imageUrl = this.value
 },
 methods: {
  // 選擇圖片
  selectImgs () {
   let file = this.$refs.file.files[0]
   lrz(file, { width: this.size, fieldName: 'file' }).then((rst) => {
    var xhr = new XMLHttpRequest()
    xhr.open('POST', this.uploadUrl)

    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', this.folder) // 保存的文件夾
    rst.formData.append('base64', rst.base64)
    // 觸發上傳
    xhr.send(rst.formData)

    return rst
   })
  },
  // 移除圖片
  remove () {
   this.imageUrl = ''
  }
 }
}
</script>

<style lang="less" scoped>
.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;
}
</style>

后端圖片存儲處理

后端api對圖片的處理，是必不可少的環節，需要將前端提交過來的base64字符串轉換成圖片格式，并存放至指定的文件夾，接口返回圖片的Url路徑。

其核心源碼,如下:

/// <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); //返回文件路徑
}

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

到此，關于“怎么使用vue實現微信端圖片壓縮上傳”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！