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()
})

你可能感兴趣的:(前端,vue)