vue+element-ui upload圖片上傳前大小超過4m,自動壓縮到指定大小,長寬

最近項目需要實現一個需求,用戶上傳圖片時,圖片大小超過4M,長寬超過2000,需要壓縮到400k,2000寬高.在git上找到一個不錯的方法,把實現方法總結一下:

安裝image-conversion包

npm i image-conversion --save

 

template

<template>
  <div class="select_invoice">
    <el-upload
      class="upload-demo"
      :multiple="true"
      :action="uploadPath"
      :data="uploadData"
      accept="bmg,.png,.jpg,.jpeg"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="hanldeError"
      multiple
      :limit="20">
      <el-button size="small" type="primary">添加圖片</el-button>
    </el-upload>
  </div>
</template>

壓縮的方法放在before-upload中,這個方法可以接受一個promise,提一下,最好下載新版本的element-UI,以前的舊版本可能不支持返回promise

js

<script>
  // 引入image-conversion
  import imageConversion from 'image-conversion' 

  methods: {
    // 第一種,不考慮圖片長寬,只考慮圖片大小的情況,圖片超過4M就壓縮
    beforeUpload (file) {
      return new Promise((resolve, reject) => {
        let isLt2M = file.size / 1024 / 1024 < 4 // 判定圖片大小是否小於4MB
        if (isLt2M) {
          resolve(file)
        }
        console.log(file)
        // 壓縮到400KB,這里的400就是要壓縮的大小,可自定義
        imageConversion.compressAccurately(file, 400).then(res => {
          // console.log(res)
          resolve(res)
        })
      })
    },

    //第二種,圖片大小超過4M,長度超過2000就壓縮
    beforeUpload2 (file) {
      // 圖片不大於4m,寬度不大於2000
      return new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL
        let isLt2M = file.size / 1024 / 1024 > 4 // 判定圖片大小是否小於4MB
        // 這里需要計算出圖片的長寬
        let img = new Image()
        img.onload = function () {
          file.width = img.width // 獲取到width放在了file屬性上
          file.height = img.height // 獲取到height放在了file屬性上
          let valid = img.width > 2000 // 圖片寬度大於2000
          // console.log(11, file)
          // 這里我只判斷了圖片的寬度,compressAccurately有多個參數時傳入對象
          if (valid || isLt2M) {
            imageConversion.compressAccurately(file, {
              size: 400,
              width: 2000
            }).then(res => {
              // console.log(33, res)
              resolve(res)
            })
          } else resolve(file)
        }
        // 需要把圖片賦值
        img.src = _URL.createObjectURL(file)
      })
    },
  }
</script>

這樣就實現了圖片的自動壓縮功能,這個組件還有一些其他功能,使用的時候如果有其他需求,可以看下文檔https://github.com/WangYuLue/image-conversion