记录二-后端处理图片后传回数据给前端处理

1. 后端处理图片
   我们知道后端返回的数据可以是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里面，我利用了

进行装载接受的图片。因为我传回的不止一张图片，就用了“，”逗号进行连接，所以才会一张一张的进行显示。由于我前端也是才刚刚学习一点知识，写出这么不规范的代码。