vue+element 將圖片壓縮並轉換成base64上傳圖片

一：   我用的是具備拖拽功能的上傳圖片的組件：

<el-form-item label="產品圖片：" prop="pictureUrl" class="itemClass">
 <el-upload
 class="avatar-uploader"
 drag
 :http-request="httpRequest"
 :action="upUrl"
 :show-file-list="false"
 :on-success="handleAvatarSuccess">
 <img v-if="addRule.pictureUrl" :src="addRule.pictureUrl" class="avatar">
 <p v-else style=" height: 20px;line-height: 20px;">
  <p v-if="!addRule.pictureUrl" style="font-size: 12px; height: 20px;line-height: 20px; position: absolute; top: 50px; color: #ccc;">點擊上傳，或者拖拽圖片至該位置，圖片大小2MB之內</p>
  <i class="el-icon-plus avatar-uploader-icon"></i>
</p>
</el-upload>
</el-form-item>
複製代碼

二：   上傳圖片，由於要限制圖片的格式，還要轉換成base64，因此我用的http-request參數，這個參數能夠覆蓋覆蓋默認的上傳行爲，能夠自定義上傳的實現:

   圖片小的話，轉換成base64能夠成功上傳，可是圖片超過1.5M的轉換成base64上傳不成功，後臺說我沒有傳給他參數，我後來瞭解了一下，說是超過1.5M的轉換成base64有問題，因此我在轉換base64以前給進行了壓縮。 不說了上完整的代碼。

httpRequest (options) {
    var that = this
    // 獲取文件對象
    let file = options.file
    //判斷圖片類型
    if (file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/JPG') {
     var  isJPG =  true
    } else {
     isJPG =  false
    }
   // 判斷圖片大小
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isJPG) {
      this.$message.error('上傳產品圖片只能是 JPG/PNG/JPEG 格式!')
    }
    if (!isLt2M) {
      this.$message.error('上傳產品圖片大小不能超過 2MB!')
    }
   // 建立一個HTML5的FileReader對象
    var reader = new FileReader();
    //建立一個img對象
   var  img = new Image();
    let filename = options.filename
    if (file) {
      reader.readAsDataURL(file)
    }
    if (isJPG && isLt2M) {
      reader.onload = (e) => {
      let base64Str = reader.result.split(',')[1]
       img.src = e.target.result
        // base64地址圖片加載完畢後執行
            img.onload = function () {
                // 縮放圖片須要的canvas（也能夠在DOM中直接定義canvas標籤，這樣就能把壓縮完的圖片不轉base64也能直接顯示出來）
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                // 圖片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
                // 最大尺寸限制，可經過設置寬高來實現圖片壓縮程度
                var maxWidth = 300,
                    maxHeight = 300;
                // 目標尺寸
                var targetWidth = originWidth,
                    targetHeight = originHeight;
                // 圖片尺寸超過最大尺寸的限制
                if(originWidth > maxWidth || originHeight > maxHeight) {
                    if(originWidth / originHeight > maxWidth / maxHeight) {
                        // 更改寬度，按照寬度限定尺寸
                        targetWidth = maxWidth;
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                    } else {
                        targetHeight = maxHeight;
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                    }
                }
                //對圖片進行縮放
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                // 清除畫布
                context.clearRect(0, 0, targetWidth, targetHeight);
                // 圖片壓縮
                context.drawImage(img, 0, 0, targetWidth, targetHeight);
                /*第一個參數是建立的img對象；第二三個參數是左上角座標，後面兩個是畫布區域寬高*/
                //壓縮後的base64文件
                var newUrl = canvas.toDataURL('image/jpeg', 0.92);
                 that.Api.post("/app/uploadPicture",{ fileContent:newUrl})
                 .then(res => {
                  that.addRule.pictureUrl = res.data;
                })
                 .catch(err => {
                 })
            }
     }
    }
  },

複製代碼

親測有用，ღ( ´･ᴗ･` )比心