nodejs multer上傳檔案

為項目添加上傳頭像功能，線上位址http://www.5rgame.com

一、前端代碼

1.前端使用 FormData 方式上傳檔案，我直接使用ajax送出，其配置的參數主要有：

async: false,
cache: false,
credentials: true,  //跨域發送cookie，不跨域不用設定
contentType: false, //不可缺參數
processData: false, //不可缺參數
           

2.建立FormData，往裡添加資料,如果使用from表單請看參考代碼

var data = new FormData();
data.append('avatar', $(dom)[0].files[0]);
//name與value對應$(dom)[].files[]為上傳的檔案
data.append('token', token);//token為普通文字字段
           

3.參考代碼

-------------html-----------------
<form id= "uploadForm">  
      <p >指定檔案名： <input type="text" name="filename" value= ""/></p >  
      <p >上傳檔案： <input type="file" name="file"/></ p>  
      <input type="button" value="上傳" onclick="doUpload()" />  
</form>  

-------------script-------------

function doUpload() {  
     var formData = new FormData($( "#uploadForm" )[]);  
     $.ajax({  
          url: '' ,  
          type: 'POST',  
          data: formData,  
          async: false,  
          cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
}  
           

二，node伺服器端代碼

1.node檔案上傳要借助第三方子產品，我使用的是multer，安裝

$ npm install --save multer

位址：https://github.com/expressjs/multer

2.借鑒别人的配置，建立一個multerUtil.js

var  multer=require('multer');
var storage = multer.diskStorage({
     //設定上傳後檔案路徑，uploads檔案夾會自動建立。
        destination: function (req, file, cb) {
            cb(null, './uploads')
       }, 
     //給上傳檔案重命名，擷取添加字尾名
      filename: function (req, file, cb) {
          var fileFormat = (file.originalname).split(".");
          cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - ]);
      }
});  
//添加配置檔案到muler對象。
var upload = multer({
    storage: storage,
    limits: { 
        fileSize:  *  * 
    }
});

//如需其他設定，請參考multer的limits,使用方法如下。
//var upload = multer({
//    storage: storage,
//    limits:{}
//});

 //導出對象
module.exports = upload;
           

3.接口檔案代碼，加上我圖檔裁剪功能，使用node-images子產品，安裝

$ npm install images

const validator = require('validator');//表單驗證
const muilter = require('../models/multerUtil.js');
const path = require('path');
const fs = require('fs');
const images = require("images"); //圖檔裁剪

//上傳頭像
    app.post('/upload', muilter.single('avatar'), function(req, res){
        //判斷請求方式,擷取token
        var token = req.body.token;
        var user = req.session.user;
        if(!token || user.token != token){
            return res.json({
                code: ,
                msg: 'Token錯誤'
            });
        }
        if(user.token != token){
            req.session.user = null;
        }
         // 沒有附帶檔案
        if (!req.file) {
            return res.json({
                code: ,
                msg: '檔案不存在'
            });
        }
        var extName = ''; //字尾名
        switch (req.file.mimetype) {
            case 'image/pjpeg':
                extName = 'jpg';
                break;
            case 'image/jpeg':
                extName = 'jpg';
                break;
            case 'image/png':
                extName = 'png';
                break;
            case 'image/x-png':
                extName = 'png';
                break;
        }
        if (extName.length === ) {
            return res.json({
                code: ,
                msg: '圖檔格式不正确'
            });
        }
        // 輸出檔案資訊
//      console.log('====================================================');
//      console.log('fieldname: ' + req.file.fieldname);
//      console.log('originalname: ' + req.file.originalname);
//      console.log('encoding: ' + req.file.encoding);
//      console.log('mimetype: ' + req.file.mimetype);
//      console.log('size: ' + (req.file.size / ).toFixed() + 'KB');
//      console.log('destination: ' + req.file.destination);
//      console.log('filename: ' + req.file.filename);
//      console.log('path: ' + req.file.path);

        var createFolder = function(dirName){
            try{
                fs.accessSync(dirName, fs.F_OK);
            }catch(e){
                fs.mkdirSync(dirName);
            }
        };

        var uploadFolder = './uploads/avatar/';
        createFolder(uploadFolder)
        // 移動檔案
        let oldPath = path.join(req.file.path);
        let newPath = path.join(uploadFolder, req.file.filename);
        let min = uploadFolder+'min-'+req.file.filename;
        images(oldPath).resize(, ).save(min);
        fs.rename(oldPath, newPath, (err) => {
            if (err) {
                console.log(err);
                return res.json({
                    code: ,
                    msg: '上傳失敗'
                });
            } else {
                //位址記得存入資料庫
                return res.json({
                    code: ,
                    data: {
                        orihead: req.session.user.orihead,
                        head: req.session.user.head
                    },
                    msg: '上傳成功'
                });
            }
        });
    })