node 实现图片的裁切与上传

LuDongWei

使用了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插件

阅读 3.5k

笔记与心得
记录自己在前端开发中碰到的事物。

英语不擅长的前端工作者

620 声望
20 粉丝
0 条评论

英语不擅长的前端工作者

620 声望
20 粉丝
文章目录
宣传栏