總括：個人在專案開發中所遇到的問題總結，主要介紹兩個知識點：

①vue-resource如何實現表單提交。

②file圖片上傳如何壓縮，減少上傳壓力

vue中的程式碼

let that = this
      // 上傳圖片獲取url
      console.log('沒處理時的大小:' + this.headerImage100.length)
      this.$server.uploadHeader(this.headerImage100, (data) => {
        that.produceImg = data.url
        if (that.produceImg) {
          that.putHeader()
          // 將圖片SRC傳遞給父元件
          that.$emit('changeImg', that.produceImg)
        }
      }, res => {
        that.errhandle(res.body)
      })
 

  /**
   * 上傳頭像
   * @param file
   * @param cb
   * @param err
   * Server.path.apiCS + 'image'
   */
  uploadHeader (file, cb, err) {
    function dataURLtoBlob (dataurl) {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = window.atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new window.Blob([u8arr], {type: mime})
    }
    console.log('處理後的大小：' + dataURLtoBlob(file).size)
    let uploadData = new window.FormData()
    uploadData.append('upfile', dataURLtoBlob(file), 'image.png')
    uploadData.append('owner', window.sessionStorage.userId || 111)
    uploadData.append('group', 'protal')
    uploadData.append('chmod', '777')
    uploadData.append('enterpriseId', 1)

    this.$http.post(Server.path.apiCS + 'image', uploadData).then((res) => {
      cb(res.data)
    }, this.error(err))
  }
 

一、vue-resource如何實現表單提交

let uploadData = new window.FormData()
    uploadData.append('upfile', dataURLtoBlob(file), 'image.png')

this.$http.post(Server.path.apiCS + 'image', uploadData).then((res) => {

二、file的壓縮

知識儲備：window.atob()和window.btob()，簡而言之就是JavaScript中base64的解碼與編碼

舉個栗子方便了解：

var str = 'javascript';

window.btoa(str)
//轉碼結果 "amF2YXNjcmlwdA=="

window.atob("amF2YXNjcmlwdA==")
//解碼結果 "javascript"

很明顯，這種方式是不行的，那麼如何讓他支援漢字呢，這就要使用window.encodeURIComponent和window.decodeURIComponent

var str = "China，中國";

window.btoa(window.encodeURIComponent(str))
//"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="

window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))
//"China，中國"

最後，如果有同學還不滿意，還需要壓縮更小。

可以還可以使用vue外掛 j-i-c 來把上傳的圖片壓縮  傳送門

最後的最後，有個很棒的前端壓縮圖片部落格  傳送門