基于前台vue,后台是spring boot的压缩图片上传

本人是刚毕业的新手，最近公司的一个项目，前后端分离，前端Vue，后端使用spring boot。其中有一个需求是需要做前端上传的图片需要压缩才能上传。为此在网上查找资料，并做了简单的实现。

那么一步来

一。前端

1.先写界面，考虑到时间问题，就先写个简单的页面，创建个Imagepress.vue

 <template>
     <div>
         <input id="inputele" type="file"  accept="image/*" @change="readImg">
         <canvas id="canvasImg" ></canvas>
     </div>
 </template>

2.当用户点击,上传图片时，触发change事件，调用readImg方法。readImg方法如下：

 readImg: function(e){
                 let that=this
                 console.log('123')
                 let file = e.target.files[0]
                 let reader = new FileReader()
                 let img = new Image()
                 reader.readAsDataURL(file)
                 //console.log(file)

                 let canvas = document.getElementById('canvasImg');
                 let context = canvas.getContext('2d');
                 reader.onload = function(e) {// 文件base64,可以看看结果
                     img.src = e.target.result;
                     //console.log('文件base64,可以看看结果'+img.src);
                 }
                 img.onload=function(){
                     let w=this.width,h=this.height
                     let width=w,height=h
                     let size=400
                     if (w>=h&&w>size) {//宽>高
                         width=size
                         height=size/w*h
                     } else if (w<h&&h>size) {
                         height=size
                         width=size/h*w
                     }
                     let canvas = document.getElementById('canvasImg');
                     let context = canvas.getContext('2d');

                     //计算画布的大小
                     canvas.width=width
                     canvas.height=height
                     context.clearRect(0,0,width,height)
                     //img重新画到特定大小的画布上
                     context.drawImage(img,0,0,width,height)
                     //画完之后的互补就是压缩之后的图片canvas
                     //缩略图canvas转为二进制的数据用于上次
                     // canvas.toBlob(function(blob){
                     //     console.log('哈哈，开始上传压缩的图片了')
                     //     console.log(blob)
                     //     that.$http.post('http://127.0.0.1:8088/index',blob)
                     // })
                     let newData=canvas.toDataURL("image/png",0.3)
                     console.log(typeof(newData))
                     let files=new Array()
                     files.push(newData)
                     that.$http.post('http://localhost:8088/index',files)
                 }
             }

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

所以后台代码

@RequestMapping(value="/index",method=RequestMethod.POST)

public String uploadimg(@RequestBody String[] files) throws Exception{

}

具体代码如下

 @RequestMapping(value="/index",method=RequestMethod.POST)
     public String uploadimg(@RequestBody String[] files) throws Exception{

         if(files==null||files.length==0)
             return null;
         String data="";
         String dataprefix="";

         for(String file:files){
             String[] str=file.split("base64,");
             if(str==null||str.length!=2)
                 return null;
             dataprefix=str[0];
             data=str[1];
               String suffix = "";
                 if("data:image/jpeg;".equalsIgnoreCase(dataprefix)){//data:image/jpeg;base64,base64编码的jpeg图片数据
                     suffix = ".jpg";
                 } else if("data:image/x-icon;".equalsIgnoreCase(dataprefix)){//data:image/x-icon;base64,base64编码的icon图片数据
                     suffix = ".ico";
                 } else if("data:image/gif;".equalsIgnoreCase(dataprefix)){//data:image/gif;base64,base64编码的gif图片数据
                     suffix = ".gif";
                 } else if("data:image/png;".equalsIgnoreCase(dataprefix)){//data:image/png;base64,base64编码的png图片数据
                     suffix = ".png";
                 }else{
                     throw new Exception("上传图片格式不合法");
                 }

               //因为BASE64Decoder的jar问题，此处使用spring框架提供的工具包
                 byte[] bs = Base64Utils.decodeFromString(data);
                 //FileUtils.writeByteArrayToFile(new File(savepath+System.currentTimeMillis()+suffix), bs);
                 FileOutputStream out=new FileOutputStream(new File(savepath+System.currentTimeMillis()+suffix));
                 out.write(bs);
                 out.flush();
                 out.close();
         }
         return "开始上传图片";
     }

具体图片的保存地址我配置在了application.yml中，具体如下

server:
port: 8088

savepath: E:/images/

发现压缩的图片也保存好了，查看图片的大小，发现图片确实变小了。

现在基本完成图片的压缩上传。在手机端也是没有问题的。

作为刚毕业没毕业多久的人，肯定还有不足，若有不足请各位大佬多多提醒。这是第一篇博客，也请各位多多留言。