基於前臺vue,後臺是spring boot的壓縮圖片上傳

時間 2019-11-10

標籤基於前臺 vue 後臺 spring boot 壓縮圖片上傳欄目 Spring 简体版

原文原文鏈接

本人是剛畢業的新手，最近公司的一個項目，先後端分離，前端Vue，後端使用spring boot。其中有一個需求是須要作前端上傳的圖片須要壓縮才能上傳。爲此在網上查找資料，並作了簡單的實現。前端

那麼一步來vue

一。前端spring

1.先寫界面，考慮到時間問題，就先寫個簡單的頁面，建立個Imagepress.vuecanvas

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，app

b.計算canvas畫布的大小，將讀取的img從新畫到特定到校的畫布上框架

c.最後調用cavas.toDataURL("image/png",0.3)進行壓縮，該方法有2個參數，第一個是指定圖片的格式，第二個參數是指定壓縮圖片的質量，取值在0-1之間，返回值是一個 data URI 的DOMString。前後端分離

頁面效果工具

按F12打開開發者工具post

能夠看到已經向後臺發起請求了。

二。後端

後端我是使用的是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     }