node 实现图片的裁切与上传

使用了node以后,图片上传可以由node服务器来完成,保存后的图片地址再传给后台进行保存。简单的文件操作切割,压缩什么的也可以交给node服务器完成。

图片的上传

使用的插件

formidable: form 表单上传
uuid: 生成通用识别码

javaScript代码

function fileUpload(input,callback){
   if(typeof(Worker) !== "undefined"){
     var data = new FormData();         
     data.append('file',$(input)[0].files[0]);
     
     $.ajax({
       url : '/fileUpload',
       type : 'POST',
       data : data,
       processData: false,
       contentType: false, 
       success : function(ret){
          callback(ret); 
       },
       error : function(ret){
          callback(ret);
       } 
     }) 
   }else{
     alert("该游览器暂不支持文件上传");
     
     return 
   }
}

node代码

app.route("/fileUpload")    
.post(function(req, res, next) {
   var form = new formidable.IncomingForm();
   
   form.parse(req,function(err,fields,files){
        if(err || !files.file){
           res.jsonp({
              succeed : false,
              status : 400,
              errMsg : "上传失败"
           })
           return 
        }
        
        if (files.file.size > 16*1024*1024){
           res.jsonp({
              succeed : false,
              status : 402,
              errMsg : "文件不要超过16Mb"
           })
           return 
        }
        
        var old_path = files.file.path,
            fileReadStream = fs.createReadStream(old_path); 
        
        var name = uuid.v1(),
              tt = name.split('-')[0],
              f1 = tt.slice(0, 2),
              f2 = tt.slice(2, 4),
              f3 = tt.slice(4, 6),
              f4 = tt.slice(6, 8),
              a1 = "/../public/uploads/upFile/" + f1 + "/" + f2 + "/" + f3 + "/" + f4,
              a2 = "/" + files.file.name,
              folder = __dirname + a1,
              new_path = folder + a2,
              visit = "/uploads/upFile/" + f1 + "/" + f2 + "/" + f3 + "/" + f4 + a2;

        mkdirs(folder, function(bbb) {

            var fileWriteStream = fs.createWriteStream(new_path);

            fileReadStream.pipe(fileWriteStream);

            var src = path.normalize(visit),
                reg = /\\/g,
                out = src.replace(reg, "/");

            res.jsonp({
                succeed: true,
                distinctImg: out,
                errMsg: "上传成功"
            })

        })    
              
   })
})

图片的裁切

使用的插件

gm: 图片node处理
jcrop: 图像裁剪jquery插件

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值