本文首發於：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陣列中...
捋一下大概的邏輯，其實非常簡單：
- 前臺選擇完成圖片會進入filesAdded方法回撥中
- 在filesAdded主要做了兩個判斷：一是選擇圖片的大小不得超過5M，二則是如果選擇的圖片大於1M則進行壓縮，否則不進行。
- 將壓縮過的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="#"，否則會請求兩次。