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

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

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

导入依赖

 		<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" />
  1. 输出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>
  1. 发送请求时携带该控件所携带的信息
    在这里插入图片描述
  2. 后端接收文件的接口
@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;
    }

}

在这里插入图片描述
在后端建立一个文件夹,用来放前端接收到的文件

  1. 前端的文件展示

一般情况当我们启动Springboot项目后我们可以直接用浏览器输入地址来访问某个资源,如:图的文件资源
在这里插入图片描述
在这里插入图片描述
所以在前端,只要找到该地址进行绑定即可
在这里插入图片描述补充:如果不是图片呢?如果只是普通的文件会怎么呢?例如一个doc文件
在这里插入图片描述
在浏览器中输入该资源的地址,就可以下载了!!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值