本文首发于：https://webug.io
简介
cube-ui是滴滴的一款基于Vue.js 实现的精致移动端组件库
快速使用
我们在使用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 删除图片回调方法
更多方法参数可见：https://didi.github.io/cube-ui/#/zh-CN/docs/upload
具体方法实现
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="#"，否则会请求两次。
