基于前台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/

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

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

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

巴特西

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

最新文章

热门文章