前台基于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();
Map<String,Object>resultMap=new HashMap<String,Object>();
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("上传失败!");
}
这样就实现了 新手上路 请大神多多指教
阅读更多- 基于spring-boot的文件上传和下载(包括图片的压缩)--第一篇(Java代码)
- 基于SpringBoot实现图片上传与显示
- springboot整合H+,基于summernote的富文本编辑器图片上传
- 当使用ajax 由前台像后台post 数组类型数据的一些问题(基于springboot)
- SanJi Boot Security——一个基于Spring Boot 与 Vue的后台脚手架
- 基于spring-boot的web应用,ckeditor上传文件图片文件
- spring boot 图片上传后的图片读取路径在win与linux环境配置的差别
- 基于SpringMVC+Bootstrap实现图片异步上传进度显示
- 前端获取图片压缩后上传给后台
- springBoot整合ftp上传图片功能
- Jquery+HTML5+PHP实现前台压缩图片并上传
- post图片上传php后台接收到的是空(压缩图片)
- spring boot 图片上传阿里云oss云存储
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- 前台使用ajax上传图片,后台 node.js 使用 formidable 进行图片接受并存于服务器静态文件夹中
- Django 前台访问后台上传的图片
- Vue.js 2.0 移动端拍照压缩图片预览及上传实例
- springmvc/springboot处理前台字符串日期自动转换成后台date类型的三种办法
- js本地压缩图片,上传base64给后台,再给七牛