素材牛VIP会员
nodejs 为前端传递验证码图片时出问题
 ch***az  分类:Node.js  人气:1343  回帖:3  发布于6年前 收藏

前端的代码: $('#capShow')获取验证码容器

$(document).ready(function() {
  // try to get captcha
    var getCcap = function() {
    $.ajax({
        type: "GET",
        url: "/getCaptcha",
        cache: false,
        headers: {
            Accept: "image/jpeg",
            "Content-Type": "image/jpeg"
        },
    }).done(function(data) {
        console.log(data);
        $('#capShow').html(data);
    }).fail(function() {
        console.error('Fail to get captcha from server!')
    });
  };

  getCcap();
  $('#capShow').on('click', function() {
      getCcap();
  });
})

后端的代码:引用了ccap这个生成验证码的模块

var ccap = require("ccap")
exports.captcha = function(req, res) {
    var arr = ccap.get();
    var text = arr[0];
    var buf = arr[1];
  // fs.writeFile("cap.jpeg", buf, function(err) {
  //   if (err) {
  //     console.log("errro!");
  //   } else {
  //     console.log("保存成功!");
  //   }
  // });
  res.set('Content-Type', 'image/jpeg');
  res.send(buf);
};

app.get('/getCaptcha', login.captcha);

以上是代码,上下文还是比较明确的,前端收到的data还是一大串buffer,设置了请求头。不知是什么问题,小弟刚开始写后端

讨论这个帖子(3)垃圾回帖将一律封号处理……

Lv6 码匠
lu***ng 软件测试工程师 6年前#1

这个没错,是一个图片。你ajax收到的一大串buf也是对的它就是图片。唯一遗憾的是你没有办法显示出来。所以正确的办法是
显示验证码
刷新按钮这样写:
var img_tag = $("#xxx);//找到img标签
img_tag.attr("src", "/getCaptcha");

另外url中最好不要有大小写混合,这涉及到不同的web server和app server甚至操作系统的大小写敏感问题。(今天这段话我重复了两遍)

Lv5 码农
躺***上 技术总监 6年前#2

后端有没有问题我不清楚,你可以把图片输出到页面试试。

不过前端部分就有问题,直接用AJAX得到的图片只能是数据,因为它并没有用Image对象来包装。

其实图片不必用AJAX来获取,你可以把验证码当作一般的图片URL,直接用image包装或者使用直接把它输出就可以。

objImage = new Image();
objImage.src='/getCaptcha'; 

OR

<img src="/getCaptcha"/>
Lv4 码徒
大***咒 JAVA开发工程师 6年前#3

前后端分离开发模式(非MVC),ajax获取到图片验证码之后,用户数据填好ajax提交后台,后端如何判断前端提交的验证码就是后端生成的验证码?ccap生成验证码之后保存数据库?

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取