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

本文首發於:webug.iovue

簡介

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

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

快速使用

咱們在使用cube-ui以前首先須要npm進行安裝web

npm install cube-ui --save
複製代碼

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

安裝完成以後須要在main.js裏面import一下npm

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

接下來在頁面中就能夠調用cube-ui的組件了!!!canvas

示例

<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數組中...bash

捋一下大概的邏輯,其實很是簡單:session

  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="#",不然會請求兩次。

相關文章
相關標籤/搜索