axios下载图片无法展示问题

项目场景:

js前端下载图片的时候总是报下载格式不对或者文件损坏导致下载的图片打不开


问题描述

我在项目中下载下来的文件或者图片,能下载下来但是打不开,报文件损坏


 

原因分析:

       发现是请求投未加 responseType: 'arraybuffer',系统默认是空的。

        后续我增加后发现还是不行,通过查询资料,发现mock.js竟然会影响到responseType的值。

        

        


解决方案:

那么第一种解决办法已经有了,就是修改Mockjs,文件路径node_modules>mockjs>dist>mock.js
  if (!this.match) {
          this.custom.xhr.responseType = this.responseType //新加的解决该问题的代码
              this.custom.xhr.send(data)
              return
    }
    但是只能针对个人项目。

第二种:修改mock.js配置

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用Hutool的验证码工具类来生成验证码,并将其展示在登录页面上,然后使用axios将用户输入的账号、密码和验证码发送给后端进行验证。 以下是一个示例代码: 前端部分: ```html <!-- 展示验证码 --> <img id="captchaImg" src="/captcha"> <!-- 账号输入框 --> <input type="text" id="username"> <!-- 密码输入框 --> <input type="password" id="password"> <!-- 验证码输入框 --> <input type="text" id="captchaInput"> <!-- 登录按钮 --> <button onclick="login()">登录</button> ``` ```javascript function login() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; const captcha = document.getElementById('captchaInput').value; axios.post('/login', { username, password, captcha }).then(response => { if (response.data.success) { // 登录成功 } else { // 登录失败 } }); } ``` 后端部分: ```java // 生成验证码 String captcha = CaptchaUtil.createLineCaptcha(200, 100, 4, 150).getCode(); // 将验证码存储到session中 request.getSession().setAttribute("captcha", captcha); // 验证登录信息 String username = request.getParameter("username"); String password = request.getParameter("password"); String inputCaptcha = request.getParameter("captcha"); String sessionCaptcha = (String) request.getSession().getAttribute("captcha"); boolean success = inputCaptcha.equalsIgnoreCase(sessionCaptcha) && "admin".equals(username) && "123456".equals(password); Map<String, Object> resultMap = new HashMap<>(); resultMap.put("success", success); // 将验证结果返回给前端 response.setContentType("application/json;charset=UTF-8"); response.getWriter().write(JSON.toJSONString(resultMap)); ``` 在上面的示例代码中,前端展示了一个验证码图片,并提供了账号、密码和验证码的输入框以及一个登录按钮。当用户点击登录按钮时,通过axios将用户输入的账号、密码和验证码发送到后端进行验证。后端使用Hutool的验证码工具类生成验证码,并将其存储到session中。当用户输入账号、密码和验证码并点击登录按钮时,后端将用户输入的验证码与session中的验证码进行比较,判断验证码是否正确,同时还判断账号密码是否正确。最后,后端将验证结果返回给前端。如果登录验证成功,可以将用户的相关信息存储到session中,以便后续的操作使用。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值