File对象上传图片(nodejs版)
发布在nodejs-DemoDemo go2015年4月2日view:3831HTML5buy_cialisExpress
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

描述

当然,上传图片有很多种方法,ajaxfileupload+formidable也可以。但是现在介绍利用File对象上传图片,后端nodejs处理base64编码的方法。当然,这里还会用到七牛,可以不用,如果只是想将图片保存在本地,那么直接用fs.createWriteStream()即可。当然为了更加方便的使用七牛,我用了fengmk2 写的七牛库。比较简单。下面就会介绍如何使用。

配置

安装库:

sudo npm install qn --save

配置config.js

module.exports = {
  qiniu: {
      ACCESS_KEY: '',
      SECRET_KEY: '',
      Bucket_Name: '',
      Port: 19110,
      Domain: ''
  }
};

引入qn库并配置:

var qn = require('qn');
var s = require('config');
// qn
var client = qn.create({
    accessKey: s.qiniu.ACCESS_KEY,
    secretKey: s.qiniu.SECRET_KEY,
    bucket: s.qiniu.Bucket_Name,
    domain: s.qiniu.Domain
});

前端文件上传

前端使用File对象读取图片文件,通过jQuery直接上传。

var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
    var fileType = file.name.substring(file.name.lastIndexOf('.'), file.name.length);
    var now = new Date();
    var fileName = now.getTime() + 'langting' + parseInt(Math.random() * 20) + fileType;
    $(".addimage").text("上传中...");
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/case/bugimage/add',
        data: {
            imageData: e.target.result,
            imageName: fileName
        },
        success: function(callback) {
            var back = callback;
            if (back.state == true) {
                $(".addimage").text("上传成功");
                setTimeout(function() {
                    $(".addimage").text("添加图片");
                }, 500);
            } else {
                alert("上传失败");
            }
        }
    });
}

nodejs处理

nodejs对获取到的数据其实是base64的,所以要进行转化为二进制数据。

router.post('/case/bugimage/add', function(req, res) {
    var imageData = req.param('imageData');
    var imageName = req.param('imageName');
    imageData = imageData.replace(/^data:image\/\w+;base64,/, "");
    var dataBuffer = new Buffer(imageData, 'base64');
    client.upload(dataBuffer, {
        key: imageName
    }, function(err, result) {
        if (err) {
            res.json({
                state: false,
                imgname: imageName,
                imgurl: "",
                imghash: ""
            });
        } else {
            res.json({
                state: true,
                imgname: result.key,
                imgurl: result.url,
                imghash: result.hash
            });
        }
    });
});

总结

以上是通过ajax和nodejs简单的交互传图片,减少了利用其他图片的方式,当然还有其他种方式,但是这样做,同时可以直接预览本地图片,可扩展性高,方便添加更多的功能。

评论
发表评论
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
WRITTEN BY
DONE
有想法的,技术不够,学习ING~~~
TA的新浪微博
PUBLISHED IN
nodejs-DemoDemo go

写一些nodejs的东西,不知道自己的nodejs水平怎么样。当周围没有人的时候,你写一个东西,可能沾沾自喜,但是只有懂的人,分分钟找到你的漏洞。所以,希望融入这些牛圈里,写一点自己的东西,发现不足处,修的金钟罩。

我的收藏