前后端交互之验证码处理与图片的交互

验证码的后端生成与前端接收

• 后端采用开源工具类来生成验证码

导入依赖

 		<dependency>
            <groupId>com.github.whvcse</groupId>
            <artifactId>easy-captcha</artifactId>
            <version>1.6.2</version>
        </dependency>

此验证码工具类特别强大，不仅满足前后端分离项目，也满足其它需要：介绍详情：https://github.com/whvcse/EasyCaptcha

1. 直接利用输入输出流来加载出验证码

@RequestMapping("/getImage2")
    public void getImage(HttpServletRequest request, HttpServletResponse response) throws IOException{
        CaptchaUtil.out(request, response);
    }

在 postman工具中测试，看该接口回返回什么东西：

前端使用：

<img src="/user/getImage2" width="130px" height="48px" />

2. 输出base64编码

@RequestMapping("/getImage")
    public String getImageCode(HttpServletRequest request){
        SpecCaptcha specCaptcha = new SpecCaptcha(130,48,4);//三个参数分别为：图片的长宽和验证码的个数

        String code = specCaptcha.text().toLowerCase();
        request.getSession().setAttribute("verifyCode", code);
        String s = specCaptcha.toBase64();
        return s;
    }

在 postman工具中测试，看该接口回返回什么东西：

前端使用：

<img src="/user/getImage" width="130px" height="48px" />

前端上传图片与后端接收，及图片的再次在前端展示

1. 前端的文件上传控件

<td>
	<input type="file" ref = "myPhoto">
</td>

2. 发送请求时携带该控件所携带的信息
   
3. 后端接收文件的接口

@RestController
@RequestMapping("emp")
@CrossOrigin
public class EmpController {

    @Value("${photo.dir}")
    private String realPath;

    @Autowired
    private EmpService empService;

    @PostMapping("save")
    public Map<String, Object> save(Emp emp, MultipartFile photo) throws IOException {
        System.out.println(emp);
        System.out.println(photo.getOriginalFilename());
        Map<String,Object> map = new HashMap<>();
        //头像保存
        try {
            //用UUID为了使文件名不重复
            String newFileName = UUID.randomUUID().toString()+"." + FilenameUtils.getExtension(photo.getOriginalFilename());
            //下面代码的作用,是将MultipartFile转换成普通的File文件，同时把file存放的固定的目录文件夹下
            photo.transferTo(new File(realPath, newFileName));
            //在数据库中只保存它的地址，不去存完整的路径名，只需要存储后面用UUID生成的名字，因为前面的名字，可以固定的写好，或者在前端拼接。
            emp.setPath(newFileName);
			//在数据库中只保存它的地址
            empService.sava(emp);
            map.put("state",true);
            map.put("msg","员工信息保存成功");
        } catch (Exception e) {
            e.printStackTrace();
            map.put("state",false);
            map.put("msg","保存失败");
        }
        return map;
    }

}

在后端建立一个文件夹，用来放前端接收到的文件

4. 前端的文件展示

一般情况当我们启动Springboot项目后我们可以直接用浏览器输入地址来访问某个资源，如：图的文件资源


所以在前端，只要找到该地址进行绑定即可
补充：如果不是图片呢？如果只是普通的文件会怎么呢？例如一个doc文件

在浏览器中输入该资源的地址，就可以下载了！！