Vue使用cube-ui的upload元件實現圖片壓縮

四年發表於2019-02-22
VueUI元件

本文首發於：webug.io

簡介

cube-ui是滴滴的一款基於Vue.js 實現的精緻移動端元件庫

官方文件地址：didi.github.io/cube-ui/#/z…

快速使用

我們在使用cube-ui之前首先需要npm進行安裝

npm install cube-ui --save
複製程式碼

注意：此安裝部分只針對於 vue-cli < 3 的情況

安裝完成之後需要在main.js裡面import一下

import Cube from 'cube-ui'
Vue.use(Cube);
複製程式碼

接下來在頁面中就可以呼叫cube-ui的元件了！！！

示例

<cube-upload
    ref="upload"
    :simultaneous-uploads="1"
    :max = "5"
    :auto="false"
    @files-added="filesAdded"
    @file-removed = "filesRemoved"
/>
複製程式碼
  • simultaneous-uploads 上傳併發數
  • max 最多可選擇多少張
  • auto 是否自動上傳
  • files-added 選擇完圖片回撥方法
  • file-removed 刪除圖片回撥方法

更多方法引數可見：didi.github.io/cube-ui/#/z…

具體方法實現
data(){
    return{
        imgList:[]
    }
}


// 這裡的files是一個檔案的陣列
filesAdded(files) {
    let hasIgnore = false;
    const limitSize = 1 * 1024;
    // 最大5M
    const maxSize = 5 * 1024 * 1024;
    for (let i = 0; i< files.length; i++) {
      const file = files[i];
      // 如果選擇的圖片大小最大限制（這裡為5M）則彈出提示
      if(file.size > maxSize){
        file.ignore = true;
        hasIgnore = true;
        break;
      }
      // 如果選擇的圖片大小大於1M則進行圖片壓縮處理（Base64）
      if(file.size > limitSize){
        this.compressPic(file);
      }else{
        let reads= new FileReader();
        reads.readAsDataURL(file);
        let that = this;
        reads.onload = function(e) {
          var bdata = this.result;
          that.imgList.push(bdata)
        }
      }
    }
    hasIgnore && this.$createToast({
      type: 'warn',
      time: 1000,
      txt: '圖片最大支援5M'
    }).show()
},

// 圖片壓縮方法
compressPic(file){
    let reads= new FileReader();
    reads.readAsDataURL(file)
    // 注意這裡this作用域的問題
    let that = this;
    reads.onload = function(e) {
      var bdata = this.result;
      // 這裡quality的範圍是（0-1）
      var quality = 0.1;
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      var img = new Image();
      img.src = bdata;
      img.onload =function() {
        var width = img.width;
        canvas.width = width;
        canvas.height = width * (img.height / img.width);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        let data = canvas.toDataURL("image/jpeg",quality);
        that.imgList.push(data)
      }
    };
  }

複製程式碼

壓縮完成之後放入imgList陣列中...

捋一下大概的邏輯，其實非常簡單：

  1. 前臺選擇完成圖片會進入filesAdded方法回撥中
  2. 在filesAdded主要做了兩個判斷：一是選擇圖片的大小不得超過5M，二則是如果選擇的圖片大於1M則進行壓縮，否則不進行。
  3. 將壓縮過的base64程式碼放入imgList陣列中去

這個時候我們的資料已經拿到了，接下來要做的就是上傳到後臺去。

submit(){
    const sendData = {
        imgList : this.imgList
    }
    this.remotePost('/upload', sendData, (rsp)=> {
         // 上傳成功後的業務邏輯
    }
}
複製程式碼

後臺程式碼

@RequestMapping("/upload", method=RequestMethod.POST)
@ResponseBody
public RspEntity imgUpload(HttpSession session, @RequestBody Map<String, Object> reqData) throws Exception {
    // 圖片列表
    List<String> imgList = (List<String>)reqData.get("imgList");
    
    // 通過for迴圈取出list中的base64程式碼
    for(String imgBase64 : imgList){
        // 可通過base64轉file/byte[]等根據業務自行實現
    }
}
複製程式碼

另外一種方式通過後臺進行壓縮

data(){
    return{
        fileList: new FormData()
    }
}

filesAdded(files) {
    for (let k in files) {
      const file = files[k];
      this.existFile = file;
      this.fileList.append('files',file);
    }
}

submit(){
    this.remotePost('/upload', this.fileList, (rsp)=> {
         // 上傳成功後的業務邏輯
    }
}

複製程式碼

這樣搞就是傳參就是file型別的...

後臺程式碼則需要進行以下改造...

@RequestMapping("/upload", method=RequestMethod.POST)
@ResponseBody
public RspEntity imgUpload(HttpSession session, @RequestParam(value="files") MultipartFile[] files) throws Exception {
	for (int i = 0; i < files.length; i++) {
		MultipartFile file = files[i];
		String fileType = file.getContentType();
		if(StringUtils.isEmpty(fileType) || !fileType.matches("image.*")){
			logger.error("上傳圖片型別錯誤:" + fileType);
			rspEntity.setRspMsg("上傳圖片型別錯誤");
			rspEntity.setRspCode(AppConstants.MSG_STATUS_FAIL);
			return rspEntity;
		}
		if(file.getSize() > (long)(5 * 1024 * 1024)){
			logger.error("上傳圖片大小超過限制:" + file.getSize());
			rspEntity.setRspMsg("上傳圖片大小超過限制");
			rspEntity.setRspCode(AppConstants.MSG_STATUS_FAIL);
			return rspEntity;
		}
		String fileName = file.getOriginalFilename();
		String temp[] = fileName.split("\\.");
		if (temp.length < 2 || !temp[temp.length - 1].matches("(jpg|jpeg|png|JPG|JPEG|PNG)")) {
			logger.error("上傳圖片檔名錯誤:" + fileName);
			rspEntity.setRspMsg("上傳圖片檔名錯誤");
			rspEntity.setRspCode(AppConstants.MSG_STATUS_FAIL);
			return rspEntity;
		}
		byte[] imgCompress = CommUtil6442.compressPicForScale(file.getBytes(), 300, file.getOriginalFilename());
		// 具體根據業務實現
    }
}
複製程式碼

這裡是通過谷歌的一個圖片壓縮工具compressPicForScale，具體方法如下：

/**
	 * 根據指定大小壓縮圖片
	 *
	 * @param imageBytes
	 *            源圖片位元組陣列
	 * @param desFileSize
	 *            指定圖片大小，單位kb
	 * @param imageId
	 *            影像編號
	 * @return 壓縮質量後的圖片位元組陣列
	 */
	public static byte[] compressPicForScale(byte[] imageBytes, long desFileSize, String imageId) {
		if (imageBytes == null || imageBytes.length <= 0 || imageBytes.length < desFileSize * 1024) {
			return imageBytes;
		}
		long srcSize = imageBytes.length;
		double accuracy = getAccuracy(srcSize / 1024);
		try {
			while (imageBytes.length > desFileSize * 1024) {
				ByteArrayInputStream inputStream = new ByteArrayInputStream(imageBytes);
				ByteArrayOutputStream outputStream = new ByteArrayOutputStream(imageBytes.length);
				Thumbnails.of(inputStream).scale(accuracy).outputQuality(accuracy).toOutputStream(outputStream);
				imageBytes = outputStream.toByteArray();
			}
			logger.info("【圖片壓縮】imageId={} | 圖片原大小={}kb | 壓縮後大小={}kb", imageId, srcSize / 1024,
					imageBytes.length / 1024);
		} catch (Exception e) {
			logger.error("【圖片壓縮】msg=圖片壓縮失敗!", e);
		}
		return imageBytes;
	}

	/**
	 * 自動調節精度(經驗數值)
	 *
	 * @param size
	 *            源圖片大小
	 * @return 圖片壓縮質量比
	 */
	private static double getAccuracy(long size) {
		double accuracy;
		if (size < 900) {
			accuracy = 0.85;
		} else if (size < 2047) {
			accuracy = 0.6;
		} else if (size < 3275) {
			accuracy = 0.44;
		} else {
			accuracy = 0.4;
		}
		return accuracy;
	}
複製程式碼

使用之前需要在pom.xm裡面引入，如果不是maven專案則需要去網上搜尋下載

<dependency>
	<groupId>net.coobird</groupId>
	<artifactId>thumbnailator</artifactId>
	<version>0.4.8</version>
</dependency>
複製程式碼

遇到的坑

我們在使用上傳外掛的時候，如果不是自動上傳，則需要將action刪除掉，不能將其設定為：action="#"，否則會請求兩次。

相關文章