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;
    }
  }
复制代码

完成~