本人是刚毕业的新手，最近公司的一个项目，前后端分离，前端Vue，后端使用spring boot。其中有一个需求是需要做前端上传的图片需要压缩才能上传。为此在网上查找资料，并做了简单的实现。
那么一步来
一。前端
1.先写界面，考虑到时间问题，就先写个简单的页面，创建个Imagepress.vue
1 <template> 2 <div> 3 <input id="inputele" type="file" accept="image/*" @change="readImg"> 4 <canvas id="canvasImg" ></canvas> 5 </div> 6 </template>
2.当用户点击,上传图片时，触发change事件，调用readImg方法。readImg方法如下：
1 readImg: function(e){ 2 let that=this 3 console.log('123') 4 let file = e.target.files[0] 5 let reader = new FileReader() 6 let img = new Image() 7 reader.readAsDataURL(file) 8 //console.log(file) 9 10 11 let canvas = document.getElementById('canvasImg'); 12 let context = canvas.getContext('2d'); 13 reader.onload = function(e) {// 文件base64,可以看看结果 14 img.src = e.target.result; 15 //console.log('文件base64,可以看看结果'+img.src); 16 } 17 img.onload=function(){ 18 let w=this.width,h=this.height 19 let width=w,height=h 20 let size=400 21 if (w>=h&&w>size) {//宽>高 22 width=size 23 height=size/w*h 24 } else if (w<h&&h>size) { 25 height=size 26 width=size/h*w 27 } 28 let canvas = document.getElementById('canvasImg'); 29 let context = canvas.getContext('2d'); 30 31 //计算画布的大小 32 canvas.width=width 33 canvas.height=height 34 context.clearRect(0,0,width,height) 35 //img重新画到特定大小的画布上 36 context.drawImage(img,0,0,width,height) 37 //画完之后的互补就是压缩之后的图片canvas 38 //缩略图canvas转为二进制的数据用于上次 39 // canvas.toBlob(function(blob){ 40 // console.log('哈哈，开始上传压缩的图片了') 41 // console.log(blob) 42 // that.$http.post('http://127.0.0.1:8088/index',blob) 43 // }) 44 let newData=canvas.toDataURL("image/png",0.3) 45 console.log(typeof(newData)) 46 let files=new Array() 47 files.push(newData) 48 that.$http.post('http://localhost:8088/index',files) 49 } 50 }
a.首先是fileReader 读取上传上来的图片file，
b.计算canvas画布的大小，将读取的img重新画到特定到校的画布上
c.最后调用cavas.toDataURL("image/png",0.3)进行压缩，该方法有2个参数，第一个是指定图片的格式，第二个参数是指定压缩图片的质量，取值在0-1之间，返回值是一个 data URI 的DOMString。
页面效果
按F12打开开发者工具
可以看到已经向后台发起请求了。
二。后端
后端我是使用的是spring boot，至于spring boot的细节在这里就不赘述了。
在前端我们请求的地址是http://localhost:8088/index
所以后台代码
1 @RequestMapping(value="/index",method=RequestMethod.POST)
2 public String uploadimg(@RequestBody String[] files) throws Exception{
3 }
具体代码如下
1 @RequestMapping(value="/index",method=RequestMethod.POST) 2 public String uploadimg(@RequestBody String[] files) throws Exception{ 3 4 if(files==null||files.length==0) 5 return null; 6 String data=""; 7 String dataprefix=""; 8 9 for(String file:files){ 10 String[] str=file.split("base64,"); 11 if(str==null||str.length!=2) 12 return null; 13 dataprefix=str[0]; 14 data=str[1]; 15 String suffix = ""; 16 if("data:image/jpeg;".equalsIgnoreCase(dataprefix)){//data:image/jpeg;base64,base64编码的jpeg图片数据 17 suffix = ".jpg"; 18 } else if("data:image/x-icon;".equalsIgnoreCase(dataprefix)){//data:image/x-icon;base64,base64编码的icon图片数据 19 suffix = ".ico"; 20 } else if("data:image/gif;".equalsIgnoreCase(dataprefix)){//data:image/gif;base64,base64编码的gif图片数据 21 suffix = ".gif"; 22 } else if("data:image/png;".equalsIgnoreCase(dataprefix)){//data:image/png;base64,base64编码的png图片数据 23 suffix = ".png"; 24 }else{ 25 throw new Exception("上传图片格式不合法"); 26 } 27 28 //因为BASE64Decoder的jar问题，此处使用spring框架提供的工具包 29 byte[] bs = Base64Utils.decodeFromString(data); 30 //FileUtils.writeByteArrayToFile(new File(savepath+System.currentTimeMillis()+suffix), bs); 31 FileOutputStream out=new FileOutputStream(new File(savepath+System.currentTimeMillis()+suffix)); 32 out.write(bs); 33 out.flush(); 34 out.close(); 35 } 36 return "开始上传图片"; 37 }
具体图片的保存地址我配置在了application.yml中，具体如下
server:
port: 8088
savepath: E:/images/
发现压缩的图片也保存好了，查看图片的大小，发现图片确实变小了。
现在基本完成图片的压缩上传。在手机端也是没有问题的。
作为刚毕业没毕业多久的人，肯定还有不足，若有不足请各位大佬多多提醒。这是第一篇博客，也请各位多多留言。
