搜索
node.js - nodejs 为前端传递验证码图片时出问题
ringa_lee
ringa_lee 2017-04-17 11:05:04
[Node.js讨论组]

前端的代码: $('#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,设置了请求头。不知是什么问题,小弟刚开始写后端

ringa_lee
ringa_lee

ringa_lee

全部回复(3)
伊谢尔伦

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

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

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

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

OR

<img src="/getCaptcha"/>
阿神

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

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

天蓬老师

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号