vue--圖片壓縮上傳

圖片壓縮上傳

項目完成開開心心作測試，在手機上隨手一拍，要上傳本身美美噠的照片了~

在滿懷期待中，蹦出舒適的提示「上傳失敗」！

才發現上傳的圖片忘記壓縮，因而，開啓了圖片壓縮上傳之旅~

HTML代碼以下：

<label for="upload-img">
  <img slot="icon" :src="user.uImg" width="40" height="40" v-show="information">
  <div class="headImg mt"  v-show="personal">
    <img :src="img" alt="">
    <div class="camera">
      <i class="icon icon-camera-select"></i>
    </div>
  </div>
</label>
<input @change="uploadImg" type="file" accept="image/*" id="upload-img" name="upload-img" hidden="hidden" class="file">
複製代碼

將圖片壓縮上傳，調用接口

methods: {
    uploadImg () {
      var formData = new FormData()
      var reader = new FileReader()
      var imgName = this.$el.querySelector('.file').files[0]
      reader.readAsDataURL(this.$el.querySelector('.file').files[0])
      // 判斷圖片大小
      if (imgName.size / 1024 > 10000) {
        Toast('圖片過大不支持上傳')
      } else {
        this.imgPreview(imgName)
      }
    },
    // 獲取圖片
    imgPreview (file, callback) {
      let self = this
      // 判斷是否支持FileReader
      if (!file || !window.FileReader) return
      // 建立一個reader
      var reader = new FileReader()
      // 將圖片轉成base64格式
      reader.readAsDataURL(file)
      // 讀取成功後的回調
      reader.onloadend = function () {
        let result = this.result
        let img = new Image()
        img.src = result
        console.log('============未壓縮圖片===========')
        console.log(result.length)
        
        img.onload = function () {
          let data = self.compress(img)
          console.log(data.length)
          self.imgUrl = result

          var formData = new FormData()
          Indicator.open()
          // 這裏調取上傳圖片接口
          let form = self.$qs.stringify({
            uploadFile: data
          })
          api.upload(form)
            .then((res) => {
              console.log(res)
              Indicator.close()
              self.user.uImg = res.data.url
              self.img = res.data.url
              sessionStorage.setItem('headImg', res.data.url)
            })
        }
      }
    },
    // 壓縮圖片
    compress(img) {
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      let initSize = img.src.length;
      let width = img.width;
      let height = img.height;
      canvas.width = width;
      canvas.height = height;
      // 鋪底色
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, width, height);

      //進行最小壓縮
      let ndata = canvas.toDataURL("image/jpeg", 0.1);
      console.log("*******壓縮後的圖片大小*******");
      // console.log(ndata)
      console.log(ndata.length);
      return ndata;
    }
  }
複製代碼

完成~