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插件