NodeJs之文件上傳

一,介紹與需求

1.1,介紹

1,multer模塊

multer用於處理文件上傳的nodejs中間件,主要跟express框架搭配使用，只支持表單MIME編碼為multipart/form-data類型的數據請求.

2,fs模塊

fs模塊用於對系統文件及目錄進行讀寫操作。

1.2,需求

上傳並操作文件與文件目錄

二,配置實現

2.1,multer模塊

第一步:安裝multer模塊

cnpm install multer --save

第二步:引入multer模塊，構造multer對象: multer(opt)

 opt是個key-value對象，包含屬性dest/storage,fileFilter,limits.分表表示文件的存儲位置/方式，文件過濾，文件大小限制.如下：

var moment = require("moment");
var express = require("express");
var multer = require('multer');
var storage = multer.diskStorage({
  //文件存儲路徑
    destination: function (req, file, cb) {
        cb(null, path.join(__dirname, "/../uploads/temps"));
    },
   //修改上傳文件的名字
   //file 是個文件對象 ,fieldname對應在客戶端的name屬性
   //存儲的文件需要自己加上文件的后綴，multer並不會自動添加
   //這里直接忽略文件的后綴.
    filename: function (req, file, cb) {
        var date = new Date();
        cb(null, moment().format("YYYYMMDDhhmmss") + file.originalname);
    }
});
let objMulter = multer({storage : storage });

如果初始化multer時候沒有指定dest或者storage，上傳的文件將保存在內存中，永遠不會寫入到磁盤中，在storage中如果沒有指定destination值，那么上傳的文件將存儲在系統默認的臨時文件夾.

multer關聯的文件信息:

filedname   : 在form表單中指定的name屬性值
orginalname : 原始文件名
encoding    : 文件編碼方式
mimetype    : 多媒體類型
size        : 文件大小，單位b
destination : 文件上傳后存儲在服務端的路徑
filename    : 文件在服務端的命名
path        : 文件在服務端的完整路徑
buffer      : 文件二進制數據

ps:其中destination,filename和path只有在指定storage屬性時候有效.而buffer只有文件在內存中存儲時候有效.

multer同時提供了single/array/fields/any方法用於對接受文件數的控制.

1. single(fieldname) 接收單個文件，通過req.file訪問該文件
2. array(fieldnaem,[maxcount]) 接收多個文件,通過req.files數組方法文件.maxcount指定接收文件最大數.
3. fields(fields) 接受指定fieldname的文件,fieldname由客戶端決定，通過req.files數組方法
4. any 接收所有文件上傳,通過req.files訪問文件

2.2,fs模塊

第一步:安裝fs模塊,也可直接引用,node默認集成

cnpm install fs --save//項目目錄安裝
var fs = require("fs");//直接引入文件系統模塊

第二步:介紹fs模塊的方法

var fs = require('fs'); // 載入fs模塊

1,刪除指定文件:fs.unlink(path,callback)

path參數為該文件的絕對物理路徑，callback回調參數當中只有一個錯誤信息參數err，一般在該文件不存在或者刪除文件失敗時觸發調用。

fs.unlink('/tmp/234.txt', function(err) {
    if (err) {
        throw err;
    }
    console.log('成功刪除了 /tmp/234.txt');
});

2,讀取文件:fs.readFile(filename,[option],callback)

參數說明：

• • filename String 文件名
  • option Object
    • encoding String |null default=null
    • flag String default='r'
  • callback Function

path參數為該文件的絕對物理路徑，其中options參數可選，可以傳入編碼格式，如讀取文本文件時，可傳入'utf8',若不指定編碼格式，則默認輸出讀取的文件內容為Buffer形式，故一般都會傳入該參數。callback回調參數當中有兩個參數err和data，其中err為錯誤信息參數，一般在在文件不存在或者讀取文件失敗時觸發調用，data為文件內容。

fs.readFile('./tmp/test.txt','utf-8'function(err, data) { 
// 讀取文件失敗/錯誤 
if (err) { 
throw err; 
 } 
// 讀取文件成功 
 console.log(data); 
});

3,寫入文件:fs.writeFile(filename,data,[options],callback)，追加寫入：fs.appendFile(filename,data[,options],callback)

 filename參數為該文件的絕對物理路徑，data為需要寫入該文件當中的數據內容，其中options參數可選，可以傳入編碼格式，若不傳則默認為utf8。callback回調參數當中只有一個錯誤信息參數err，一般在寫入失敗時觸發調用。

// 寫入文件內容（如果文件不存在會創建一個文件）
// 傳遞了追加參數 { 'flag': 'a' }
fs.writeFile('./test2.txt', 'test test', { 'flag': 'a' }, function(err) {
    if (err) {
        throw err;
    }

    console.log('Saved.');

    // 寫入成功后讀取測試
    fs.readFile('./test2.txt', 'utf-8', function(err, data) {
        if (err) {
            throw err;
        }
        console.log(data);
    });
});

flag傳值，r代表讀取文件，w代表寫文件，a代表追加。

// 追加寫入
fs.appendFile("2.txt","我是追加的字符",function (err) {
    if(err){
      return  console.log(err);
    }else {
        console.log("追加成功");
    }
})

4,檢測文件是否存在:fs.exists(path,callback)

path參數傳入該文件的絕對物理路徑，該callback回調函數有個參數exists。exists為一個文件狀態對象，是否存在。

var dest_Dir = path.join(__dirname.replace("routes", ""), "uploads", destDir); 
fs.exists(dest_Dir, function (exists) {
        if (exists) {
         //存在
        }
        else {
          
        }
    });

5,移動或重命名指定文件:fs.rename(oldPath,newPath,callback)

oldPath參數為該文件原來的路徑，newPath參數為該文件移動或重命名之后的路徑，這兩個參數都必須能傳入文件完整的絕對物理路徑。callback回調參數當中只有一個錯誤信息參數，一般在oldPath當中指定的文件不存在或者該操作失敗時觸發調用。

 fs.rename(sourceFile, destPath, function (err) {
                res.status(200).json({
                    httpCode: 200,
                    message: '上傳成功',
                    data: {
                        "fileurl": fileurl
                    },
                });
});

6,創建一個目錄文件夾:fs.mkdir(path[,model],callback)

path為該目錄的絕對物理路徑，callback回調函數當中也只有一個錯誤信息參數，一般在目錄創建失敗時觸發調用。

 fs.mkdir(dest_Dir, 0777, function (err) {
                if (err) {
                    res.status(500).json({
                  
                } else {
                  //創建目錄成功,上傳文件
                    fs.rename(sourceFile, destPath, function (err) {
                        res.status(200).json({
                            httpCode: 200,
                            message: '上傳成功',
                            data: {
                                "fileurl": fileurl
                            },
                        });
                    });
                }
})

7,讀取目錄文件夾:fs.readdir(path,callback)

path為該目錄的絕對物理路徑，callback回調函數當中有兩個參數err和files，err為錯誤信息參數，一般在該目錄不存在或讀取失敗時觸發調用，files為一個數組對象，包含該目錄下的所有文件夾與文件的名字。（僅為文件夾的名字和文件名，不是路徑形式）。

fs.readdir('./newdir', function(err, files) {
    if (err) {
        throw err;
    }
    // files是一個數組
    // 每個元素是此目錄下的文件或文件夾的名稱
    console.log(files);
});

8,刪除一個空文件夾:fs.rmdir(path,callback)

path為該目錄的絕對物理路徑，callback回調函數當中也只有一個錯誤信息參數，一般在該目錄不存在或者刪除操作失敗時觸發調用。

fs.rmdir('/tmp', function(err) {
    if (err) {
        throw err;
    }
    console.log('成功刪除了 空文件夾 tmp');
});

以上的實例均是異步操作,如果需同步操作在函數后面加Sync既可

//同步 所有同步的函數都是函數后面加Sync；
 var res = fs.writeFileSync("1.txt","我是寫入內容");

2.3,文件上傳

1,單文件上傳

router.post('/upload', upload.single('file'), function (req, res, next) {
    var fileName = req.file.filename;
    var destDir = req.body.dir == undefined ? "default" : req.body.dir;
    var sourceFile = req.file.path;
    var destPath = path.join(__dirname.replace("routes", ""), "uploads", destDir, fileName);
    var dest_Dir = path.join(__dirname.replace("routes", ""), "uploads", destDir);
    var fileurl = uploadFileDomin + destPath.substr(destPath.indexOf("uploads"));
    fileurl = fileurl.replace(/\\/g, "/");
    fs.exists(dest_Dir, function (exists) {
        if (exists) {
            fs.rename(sourceFile, destPath, function (err) {
                res.status(200).json({
                    httpCode: 200,
                    message: '上傳成功',
                    data: {
                        "fileurl": fileurl
                    },
                });
            });
        }
        else {
            fs.mkdir(dest_Dir, 0777, function (err) {
                if (err) {
                    res.status(500).json({
                        httpCode: 500,
                        message: err,
                        data: [],
                    });
                } else {
                    fs.rename(sourceFile, destPath, function (err) {
                        res.status(200).json({
                            httpCode: 200,
                            message: '上傳成功',
                            data: {
                                "fileurl": fileurl
                            },
                        });
                    });
                }
            })
        }
    });

});

 2,多文件上傳

router.post('/uploads', upload.array('file', 8), function (req, res, next) {
    var paths = [];
    for (var i = 0; i < req.files.length; i++) {
        var path = req.files[i].path.replace(/\\/g, "/");
        var fileurl = uploadFileDomin + path.substr(path.indexOf("uploads")).replace('\\', '/');
        paths.push(fileurl);
    }
    res.status(200).json({
        httpCode: 200,
        message: '上傳成功',
        "fileurls": paths,
    });
});

 最后拋出發送上傳接口：

app.use("/api", require("./fileUploadApi.js"));

三,前端調用

3.1,單文件上傳調用

1,簡單html

<span>ajax upload</span>
    <div class="container">
        <label>file</label>
        <input type="file" name="file" id="file">
        <input type='button' value='上傳' id="btn_upload" />
    </div>

2,js調用

 $("#btn_upload").click(function () {
            //創建一個FormDate
            var formData = new FormData();
            //將文件信息追加到其中
            formData.append('file', file.files[0]);
            formData.append('dir', 'attachment');
            //formData.append('name', file.files[0].name);
            $.ajax({
            url: "http://localhost:3000/api/" + 'upload',
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (data) {
                callBack(data);
            },
            error: function (response) {
                console.log("error is :" + response);
            }
        });

3,實現效果

3.2,多文件上傳調用

1,簡單html

  <span>ajax multi files upload</span>
    <div class="container">
        <label>file</label>
        <input type="file" name="file" id="files1">
        <input type="file" name="file" id="files2">
        <input type="file" name="file" id="files3">
        <input type='button' value='上傳' id="btn_uploads" />
    </div>

2,js調用

        var files1 = $("#files1")[0];
        var files2 = $("#files2")[0];
        var files3 = $("#files3")[0];
        $("#btn_uploads").click(function () {
            //創建一個FormDate
            var formData = new FormData();
            //將文件信息追加到其中
            formData.append('file', files1.files[0]);
            formData.append('file', files2.files[0]);
            formData.append('file', files3.files[0]);
            $.ajax({
            url: 'http://localhost:3000/api/' + 'uploads',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            async: false,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (data) {
                callBack(data.fileurls);
            },
            error: function (response) {
                console.log("error is :" + response);
            }
        })
})

3,實現效果