- 后端处理图片
我们知道后端返回的数据可以是JSON格式的，也可以是其他形式的，其实我也不是很懂，希望有大佬可以推荐我基本书看看。目前按照我的理解是在spring cloud的项目中，后端处理的函数上加上@ResponseBody，返回的是JSON格式的数据。那么我们返回的数据可以有很多，但是可以通过一个类进行装载。比如我这个直接设置一个WebResult类进行存储我要返回的东西。里面当然含有图片的url。
public class WebResult {
public WebResult() {
}
public WebResult(boolean success) {
this.setSuccess(success);
}
public WebResult(String body) {
this.setBody(body);
}
public WebResult(boolean success, String body) {
this.setBody(body);
this.setSuccess(success);
}
//返回结果
private boolean success;
//返回头
private Objectheader;
//返回正文
private Stringbody;
private StringimgUrl;
private Stringimg_detectUrl;
private Stringstatus_Train;
}
1.1 后端图片处理过程-建立文件夹存储
前端上传的图片是MultipartFile类型的，这种图片类型很强大。我将传来的图片建立专门的文件夹进行存储以及尺寸大小的归一化。
File mkdir =new File(folderPath);
if (!mkdir.exists() && !mkdir.isDirectory()) {
mkdir.mkdir();
}else {
System.out.println("目录存在");
}File file =new File(folderPath, filePath);
Thumbnails.of(mf.getInputStream()).outputQuality(1.0).size(800, 800).toFile(file);
1.2 后端图片处理过程-转为base64码传输进行算法处理，处理的结果是返回处理后的图片base64码。相当于都是base64码。
1.3 后端图片处理过程-存储返回的图片，我利用的一个ArrayList 数组进行存储。
ArrayList imgalignUrl =new ArrayList<>();
imgalignUrl .add(图片base64码);
1.4 后端图片处理过程-返回图片base64码，前端进行处理。有人说可以返回地址，我也想知道前后端分离怎么返回地址，我试了一下，主要是当我建立虚拟地址后，我返回去的图片利用后端端口能够访问，但是前端的端口与后端端口号不一样就不能访问到。再加上返回的字符串不是很大，所有采用了返回base64这样的蠢办法。
2.前端处理图片
前端接收图片进行展示，具体的代码为
let imgurls =[];
imgurls = res.data.imgUrl.split(",");
for(let i=0;i
let img=new Image();
img.src ="data:image/jpg;base64,"+imgurls[i];
console.log(img.src);
img.style.width =148+"px";
img.style.height =148+"px";
let imgContainer=document.getElementById("imgUrl");
imgContainer.appendChild(img);
}
template里面，我利用了<li id="imgUrl"><img /></li>进行装载接受的图片。因为我传回的不止一张图片，就用了“，”逗号进行连接，所以才会一张一张的进行显示。由于我前端也是才刚刚学习一点知识，写出这么不规范的代码。
网友评论