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

本文介绍: 需求：项目当中上传图片的需求点肯定有很多，再上传之后，如果图片很大的话，在加载的时候就会很慢。最近发现系统首次加载越来越慢，就开始思考怎么能降低这个加载时间，由于首页图片很多，所以图片的大小就需要进行处理，本文记录了上传图片之前压缩图片的各种方法。一、插件 image–c on version 提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

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

文章 目录

前言

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

一、插件 image–c on version

1. 安装 依赖：

npm i image–c on version

2.页面 当中 引入：

import * a s imageCon version fro m ‘image–c on version‘

3.使用：

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

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

// 判断是图片
const i sJpgOrPng = file.type === ‘image/jpe g‘ || file.type === ‘image/png‘;
if (!i sJpgOrPng) {
console.log(‘上传头像图片只能是 JPG 或 PNG 格式!’);
return false;
}
return new Pro m i s e((resolve) =&g t; {
// 压缩到100KB,这里的100就是要压缩的大小,可自定义
 i m ageCon version.compressAc cur a t el y(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

    },

}