如下所示：

這個需求針對使用者上傳手機拍攝照片等不便修改圖片大小的情況，我們允許上傳10M以內的圖片由前端對圖片進行壓縮再傳給後臺儲存，結合elementUI的el-upload元件實現圖片上傳功能（簡單來說就是使用者是老大）

1、提取出壓縮方法，放在公共方法.js檔案裡

/** 圖片壓縮，默認同比例壓縮
 * @param {Object} fileObj
 * 圖片物件
 * 回撥函式有一個引數，base64的字串資料
 */
export function compress(fileObj,callback) {
 try {
 const image = new Image()
 image.src = URL.createObjectURL(fileObj)
 image.onload = function() {
  const that = this
  // 預設按比例壓縮
  let w = that.width
  let h = that.height
  const scale = w / h
  w = fileObj.width || w
  h = fileObj.height || (w / scale)
  let quality = 0.7 // 預設圖片質量為0.7
  // 生成canvas
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  // 建立屬性節點
  const anw = document.createAttribute('width')
  anw.nodeValue = w
  const anh = document.createAttribute('height')
  anh.nodeValue = h
  canvas.setAttributeNode(anw)
  canvas.setAttributeNode(anh)
  ctx.drawImage(that,w,h)
  // 影象質量
  if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {
  quality = fileObj.quality
  }
  // quality值越小，所繪製出的影象越模糊
  const data = canvas.toDataURL('image/jpeg',quality)
  // 壓縮完成執行回撥
  const newFile = convertBase64UrlToBlob(data)
  callback(newFile)
 }
 } catch (e) {
 console.log('壓縮失敗!')
 }
}
function convertBase64UrlToBlob(urlData) {
 const bytes = window.atob(urlData.split(',')[1]) // 去掉url的頭，並轉換為byte
 // 處理異常,將ascii碼小於0的轉換為大於0
 const ab = new ArrayBuffer(bytes.length)
 const ia = new Uint8Array(ab)
 for (let i = 0; i < bytes.length; i++) {
 ia[i] = bytes.charCodeAt(i)
 }
 return new Blob([ab],{ type: 'image/png' })
}

2、el-upload上傳元件

<el-form-item ref="uploadElement" prop="picUrl" class="upload-img-form" label-width="0">
 <el-upload
 ref="uploadxls"
 class="avatar-uploader upload-img"
 :disabled="disabled"
 :auto-upload="false"
 :style="{height:'66px',backgroundImage:'url(' + dialogImageUrl + ')',backgroundRepeat:'no-repeat',backgroundPosition:'center',backgroundSize: '100%,100%'}"
 action="aaa"
 ::limit="1"
 :show-file-list="false"
 :on-change="handlePictureCardPreview"
 :before-upload="beforeupload"
 accept="image/png,image/gif,image/jpg,image/jpeg"
 >
 <!--<img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">-->
 <i v-if="!dialogImageUrl" class="el-icon-plus avatar-uploader-icon" />
 <!--<i v-show="!dialogImageUrl" class="upload-icon" />
 <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上傳實景圖</div>-->
 <div v-if="showDelete" class="remove-img"><i class="el-icon-delete" @click.stop="removeImg" /></div>
 <div slot="tip" class="el-upload__tip">
  <p><span style="color:#F5222D;">*</span>上傳樓宇實景圖</p>
  <p>支援：.jpg .png .gif格式 建議比例：16:9，小於10M</p>
 </div>
 </el-upload>
</el-form-item>

3、主要在handlePictureCardPreview方法裡呼叫壓縮方法

先在當前vue頁面import公共js檔案

import { compress } from '@/utils'

然後

// 圖片預覽
handlePictureCardPreview(file) {
 const _that = this
 const isLt10M = file.size / 1024 / 1024 < 10
 if (!isLt10M) {
 this.$message.error('上傳圖片大小不能超過 10M!')
 return false
 } else {
 this.dialogImageUrl = URL.createObjectURL(file.raw)
 compress(file.raw,function(val) {
  _that.theForm.picUrl = val
  _that.imgFile = val
  _that.showDelete = true
  _that.$refs['addBuildingForm'].validateField('picUrl')
 })
 }
}

compress傳入file.raw作為fileObj

這樣只要上傳圖片就進行圖片壓縮

補充知識：element upload限制上傳圖片尺寸、大小、比例

我就廢話不多說了，大家還是直接看程式碼吧~

// 上傳前判斷
  public async beforeUpload(file: any) {
    const is1M = file.size / 1024 / 1024 < 3; // 限制小於3M
    if (!is1M) {
      this.$message.error('圖片尺寸限制最小為270 x 270，大小不可超過3MB，比例為1:1');
      return false;
    } else {
      const isSize = new Promise((resolve,reject) => {
        const width = 270;
        const height = 270;
        const _URL = window.URL || window.webkitURL;
        const img = new Image();
        img.onload = () => {
          const valid = img.width >= width && img.height >= height && img.width === img.height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },() => {
          this.$message.error('圖片尺寸限制最小為270 x 270，大小不可超過3MB，比例為1:1');
          return Promise.reject();
        },);
      return isSize;
    }
  }

看了很多還不如自己擼一個

以上這篇vue+elementUI(el-upload)圖片壓縮,默認同比例壓縮操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。