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

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

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

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