element-ui实现图片压缩上传

需求来源

我发现 ，其实在做图片上传的时候就应该考虑到图片压缩上传的问题，element-ui在上传一个大的图片时浏览器会报错，当然也并没有提供相关的属性跟方法去进行图片的压缩，这个时候就需要我们自己去想办法实现，当然实现图片的压缩其实网上很多方法，但是有一个插件早已把风阀给封装好，我们拿来即用就好。

image-conversion

npm i image-conversion -S	

• 页面引入

import * as imageConversion from 'image-conversion' 

• 查看element-ui文档我们可以发现
  
  
  我们可以在promise的方式去进行图片的处理，也就是在图片上传之前进行处理

// 上传之前
handleBeforeUpload(file) {
  return new Promise((resolve, reject) => {
    // 得到文件类型，如：img,png,gif....
    this.loading = true
    const type = file.name.substring(file.name.lastIndexOf(".") + 1, file.name.length).toLowerCase()
    const isType = this.dataInfo.options.types.includes(type)
    const isLt2M = file.size / 1024 / 1024 <= Number(this.dataInfo.options.fileSize)
    if (!isLt2M) {
      this.$message.error(`文件大小不能超过${this.dataInfo.options.fileSize}M!`)
    }
    if (!isType) {
      this.$message.error(`只允许上传${this.dataInfo.options.types.join(",")}格式的文件`)
    }

    if (!(isLt2M && isType)) {
      this.loading = false
    }

    // 如果允许上传，然后判断一下大小是否超过4M,如果不超过4M就不进行压缩
    if (isLt2M && isType) {
      if (file.size / 1024 / 1024 < 4) {
        resolve(file)
      } else {
        if (this.fileType !== 'pdf') {
          imageConversion.compressAccurately(file, 1000).then(res => {
            resolve(res)
          }).catch(() => {
            this.loading = false
            this.$message.error('图片压缩失败，请联系管理员进行查看！')
            reject()
          })
        }
      }
    } else {
      reject()
    }
  })
},

灵魂代码其实就是下面这一段

imageConversion.compressAccurately(file, 1000).then(res => {
  resolve(res)
}).catch(() => {
  this.loading = false
  this.$message.error('图片压缩失败，请联系管理员进行查看！')
  reject()
})