前台基于vue 图片上传 后台基于springboot的 图片压缩上传

本人新手 公司里面需要实现一个图片压缩的功能正好实现了 把代码贴出来 分享一下  

 

废话不多说 上代码  

前端 基于vue 

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

 

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

a.首先是fileReader 读取上传上来的图片file，

b.计算canvas画布的大小，将读取的img重新画到特定到校的画布上

c.最后调用cavas.toDataURL("image/png",0.3)进行压缩，该方法有2个参数，第一个是指定图片的格式，第二个参数是指定压缩图片的质量，取值在0-1之间，返回值是一个 data URI 的DOMString。

页面效果

 

按F12打开开发者工具

 

可以看到已经向后台发起请求了。

 

后端代码

 

package com.Sumainfor.hetao.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.Base64Utils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.Sumainfor.common.util.ComUtils;
import com.Sumainfor.common.util.JsonResult;
import com.Sumainfor.common.util.ToolsUntil;

@RestController
@RequestMapping("/Imgs")
public class Imgs {
    

    private static final Logger log = LoggerFactory.getLogger(Imgs.class);  
    /**
     * 压缩图片上传
     * @param files
     * @return
     * @throws Exception
     */
    @ResponseBody
    @RequestMapping(value="/index",method=RequestMethod.POST)
    public JsonResult uploadimg(@RequestBody String[] files) throws Exception{
        JsonResult result=new JsonResult();
        MapresultMap=new HashMap();
        if(files==null||files.length==0)
            return result.putFailed("上传失败！");
        String data="";
        String dataprefix="";
        
        for(String file:files){
            String[] str=file.split("base64,");
            if(str==null||str.length!=2)
                return result.putFailed("上传失败！");
            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("上传图片格式不合法");
                }
                
                
                try {  
                     //因为BASE64Decoder的jar问题，此处使用spring框架提供的工具包
                    byte[] bs = Base64Utils.decodeFromString(data);
                    String newFileName = String.valueOf(ComUtils.randomUID("img"))
                               + suffix;
                    //FileUtils.writeByteArrayToFile(new File(savepath+System.currentTimeMillis()+suffix), bs);
                    FileOutputStream out=new FileOutputStream(new File(ToolsUntil.PATH_URL+newFileName));//这里就是文件上传的路劲
                    out.write(bs);
                    out.flush();
                    out.close();
                    String url = ToolsUntil.PICTURE_URL+newFileName;
                    log.info("上传的文件名为：" + newFileName); 
                    log.info("上传成功后的文件路径未：" +url);  
                    resultMap.put("pictureUrl",url);//图片地址
                    resultMap.put("picName",newFileName);//图片地址
                    return result.put(resultMap);
                    
                } catch (IllegalStateException e) {  
                    e.printStackTrace();  
                } catch (IOException e) {  
                    e.printStackTrace();  
                }    
             
        }

        return result.putFailed("上传失败！"); 
    }

 

这样就实现了 新手上路 请大神多多指教