Element-ui 上传图片前压缩图片

上传前把图片大小进行一个压缩在进行上传。

文章目录

前言

需求：项目当中上传图片的需求点肯定有很多，再上传之后，如果图片很大的话，在加载的时候就会很慢。最近发现系统首次加载越来越慢，就开始思考怎么能降低这个加载时间，由于首页图片很多，所以图片的大小就需要进行处理，本文记录了上传图片之前压缩图片的各种方法。

一、插件image-conversion

1. 安装依赖：

npm i image-conversion

2.页面当中引入：

import * as imageConversion from 'image-conversion'

3.使用：

//把图片文件作为参数传递到方法中

// 上传之前的钩子函数
    beforeUpload(file) {

        // 判断是图片
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        console.log('上传头像图片只能是 JPG 或 PNG 格式!');
        return false;
      }
      return new Promise((resolve) => {
        // 压缩到100KB,这里的100就是要压缩的大小,可自定义
        imageConversion.compressAccurately(file, 100).then(res => {
          console.log(res)
          resolve(res);
        });
      })
    }

二、canvas

1.上传组件方法：

代码如下（示例）：

methods: {

    // 文件上传成功

    uploadSuccess(res) {

      if (res.code === 200) {

        this.imgs.push({ name: res.data, url: this.$fileUrl_ + '/' + res.data, path: res.data })

      } else {

        console.error('文件上传失败', res.msg)

      }

    },

// 上传文件之前

    beforeAvatarUpload(file) {

        // 图片大小大于2M进行图片压缩

      if (file.size / 1024 / 1024 > 2) {

        const that = this

        return new Promise(resolve => {

          const reader = new FileReader()

          const image = new Image()

          image.onload = (imageEvent) => {

            const canvas = document.createElement('canvas') // 创建画布

            const context = canvas.getContext('2d')         // 画布为2d

            const width = image.width * that.quality        // 图片宽度 * 压缩比例

            const height = image.height * that.quality      // 图片高度 * 压缩比例

            canvas.width = width                            // 画布宽度

            canvas.height = height                          // 画布宽度

            context.clearRect(0, 0, width, height)

            context.drawImage(image, 0, 0, width, height)

            const dataUrl = canvas.toDataURL(file.type)     //图片转路径

            const blobData = that.dataURLtoBlob(dataUrl, file.type) //图片转二进制

            resolve(blobData)

          }

          reader.onload = e => { image.src = e.target.result }

          reader.readAsDataURL(file)

        })

      } else {

        return true

      }

    },

   

//图片转二进制

    dataURLtoBlob(dataURL, type) {

      var binary = atob(dataURI.split(',')[1])

      var array = []

      for (var i = 0; i < binary.length; i++) {

        array.push(binary.charCodeAt(i))

      }

      return new Blob([new Uint8Array(array)], { type: type })

    },

    // 图片移除

    handleRemove(file, fileList) {

      const arr = []

      fileList.forEach(r => {

        arr.push(r.response.data)

      })

      this.imgs = arr

    },

    // 图片预览

    handlePictureCardPreview(file) {

      this.dialogImageUrl = file.url

      this.dialogVisible = true

    },

}

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。