Vue使用vant上傳組件上傳圖片並對大圖壓縮

以前寫過一篇關於Golang後端如何對圖片進行base64解碼並保存至文件服務器的文章傳送門，如今補充前端vue框架下如何對圖片壓縮上傳（使用了vant的上傳組件）。

選擇前端壓縮的緣由

減輕服務端壓力，減小流量。

Vue使用vant的上傳組件

<van-cell-group>
      <van-cell title="上傳圖片">
        <van-uploader :after-read="uploadImg" 
          accept="image/gif, image/jpeg ,image/png"
          :max-size=6000000
          @oversize="overSize" >          
          <van-icon name="photograph"/>
        </van-uploader>
      </van-cell>
    </van-cell-group>

    <div class="show-img">
      <div class="item" v-for="(item, index) in imgBase64" :key="index">
        <span class="cancel-btn" @click="delImg(index)">x</span>
        <img :src="item">
      </div>
    </div>
    
    //script中定義imgBase64圖片數組，存放base64編碼的圖片
    data() {
      return {
        imgBase64: [],
      }
    },
複製代碼

• 第一段是vant的上傳組件，包含uploadImg和overSize方法。
• 第二段用來在頁面中展現添加的圖片。包含圖片數組imgBase64,和刪除圖片的方法delImg。

uploadImg方法是本文的重點

uploadImg(file) {
    // 大於1.5MB的jpeg和png圖片都縮小像素上傳
    if(/\/(?:jpeg|png)/i.test(file.file.type)&&file.file.size>1500000) {
      // 建立Canvas對象(畫布)
      let canvas =  document.createElement('canvas')  
      // 獲取對應的CanvasRenderingContext2D對象(畫筆)
      let context = canvas.getContext('2d') 
      // 建立新的圖片對象 
      let img = new Image()
      // 指定圖片的DataURL(圖片的base64編碼數據)
      img.src = file.content
      // 監聽瀏覽器加載圖片完成，而後進行繪製
      img.onload = () => {
        // 指定canvas畫布大小，該大小爲最後生成圖片的大小
        canvas.width = 400
        canvas.height = 300
        /* drawImage畫布繪製的方法。(0,0)表示以Canvas畫布左上角爲起點，400，300是將圖片按給定的像素進行縮小。*/
        /* 若是不指定縮小的像素，圖片將以圖片原始大小進行繪製，圖片像素若是大於畫布將會從左上角開始按畫布大小部分繪製圖片，最後獲得的圖片就是張局部圖。圖片小於畫布就會有黑邊。*/ 
        context.drawImage(img, 0, 0, 400, 300)
        // 將繪製完成的圖片從新轉化爲base64編碼，file.file.type爲圖片類型，0.92爲默認壓縮質量
        file.content = canvas.toDataURL(file.file.type, 0.92) 
        // 最後將base64編碼的圖片保存到數組中，留待上傳。
        if(this.imgBase64.length < 6) {
          this.imgBase64.push(file.content)
        }else{
          alert("最多上傳6張圖片")
        }
      }                       
    }else{
      // 不作處理的jpg和png以及gif直接保存到數組
      if(this.imgBase64.length < 6) {
        this.imgBase64.push(file.content)
      }else{
        alert("最多上傳6張圖片")
      }
    }
  },
複製代碼

當咱們用vant的上傳圖片組件選中一張圖片時，就會觸發該方法，形參file中包含了content和file對象，content是組件爲咱們自動處理的base64編碼圖片，直接就能在網頁中顯示。圖片處理代碼中有詳細的註釋。

最後imgBase64數組收集了全部要上傳圖片的base64編碼，進行上傳

//post請求
  post(url, data) {
    let storage = window.localStorage
    return new Promise((resolve) => {
      axios({
        method: 'post',
        url: url,
        data: JSON.stringify(data),//將post請求的數據轉化爲json對象
        headers: { 'Authorization': storage.token,'Content-Type': 'application/json; charset=UTF-8'},
        cancelToken: new CancelToken(c => {
          cancel = c
        })
      }).then(res => {
        resolve(res)
      })
    })
  },
  
  axios.post(
    '/v2/publish',
    {
      imgList: this.imgBase64
    }
  )
  .then( response => {
  )
複製代碼

• 第一段代碼是我對axios的post方法封裝，使用json格式傳輸給後端。
• 第二段代碼是上傳請求，給imgBase64數組取了鍵名imgList,後端根據鍵名imgList就能拿到圖片數組，再進行base64解碼就能獲得圖片而後保存至文件服務器了（在個人另外一篇文章有講）。

本文沒有過多的講解，只是提供一個處理的思路，另外圖片的壓縮我也只是簡單縮小到400寬300高，具體的寬高根據比例來更好。也沒有用到所謂的壓縮，本質就是將大圖縮小而後上傳。