使用 NodeJS 將檔案或影像上傳到伺服器

2017-03-02 分類：WEB開發、程式設計開發、首頁精華0人評論發表於2017-03-02

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

在這篇文章中，我們將看到如何使用NodeJS上傳檔案或影像到伺服器。這裡我們將使用Visual Studio和以下NPM包用於我們的開發過程。

express
multer
body-parser

我們將簡要解釋這些包的使用。眾所周知，NodeJS是一個基於Chrome V8 JavaScript引擎的執行時環境，用於伺服器端和網路應用程式。並且它是支援跨平臺的開放資源。NodeJS應用程式用純JavaScript編寫。如果你是NodeJS新手，那麼我強烈建議你閱讀我以前關於Node JS的帖子。

下載原始碼

使用Node JS上傳檔案或影像到伺服器

背景

幾年前，如果你需要上傳任何檔案或影像到伺服器，那麼你得完全依賴於伺服器端語言如C#和PHP。在JS革命之後，一切都改變了。今天我將告訴你如何使用NodeJS上傳檔案到伺服器，甚至不需要寫一行伺服器端程式碼。希望你會喜歡。

建立空白的Node JS Web應用程式

在package.json中設定依賴關係

開始之前，我們首先要設定我們的依賴關係。為此，請開啟package.json檔案並貼上程式碼。

{
  "name": "node_js_file_upload",
  "version": "0.0.1",
  "description": "Node_JS_File_Upload",
  "main": "server.js",
  "dependencies": {
    "body-parser": "^1.15.2",
    "express": "^4.14.0",
    "multer": "^1.2.0"
  },
  "author": {
    "name": "Sibeesh"
  }
}

現在，執行NPM install命令，如下所示。

npm install

執行該命令後，可以看到解決方案中安裝了依賴關係。

現在我們可以理解這些依賴關係是用來幹什麼的了。

express

根據Express Team，Express是一個極小且靈活的Node.js Web應用程式框架，為Web和移動應用程式提供了一組強大的功能。Express提供了基本Web應用程式功能的一個薄層，不會掩蓋你知道和喜歡的Node.js功能。你可以隨時在這裡瞭解更多關於Express Package的資訊。

multer

Multer是一個用於處理multipart / form-data的node.js中介軟體，主要用於上傳檔案。它構建在busboy基礎上以提高效率。點選這裡閱讀更多關於multer包。

開始使用依賴關係

你可以按如下所示建立依賴關係的例項。

var Express = require('express');
var multer = require('multer');
var bodyParser = require('body-parser');
var app = Express();
app.use(bodyParser.json());

然後，建立說明應該在哪裡以及如何儲存檔案/影像的storage。

var Storage = multer.diskStorage({
    destination: function (req, file, callback) {
        callback(null, "./Images");
    },
    filename: function (req, file, callback) {
        callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
    }
});

每個檔案包含以下資訊：

fieldname：在窗體中指定的欄位名

originalname：使用者計算機上檔案的名稱

encoding：檔案的編碼型別

mimetype：檔案的MIME型別

size：檔案的大小（以位元組為單位）

destination：儲存檔案的資料夾

filename：目標檔案的名稱

path：上傳檔案的完整路徑

buffer：整個檔案的Buffer

現在請建立multer物件如下。

var upload = multer({ storage: Storage }).array("imgUploader", 3); //Field name and max count

這裡multer接受我們在上一步中建立的storage作為引數。函式

array(fieldname[, maxCount])

接受檔案陣列，所有檔名都為fieldname。

現在我們該寫post和get請求了：

app.get("/", function (req, res) {
    res.sendFile(__dirname + "/index.html");
});

app.post("/api/Upload", function (req, res) {
    upload(req, res, function (err) {
        if (err) {
            return res.end("Something went wrong!");
        }
        return res.end("File uploaded sucessfully!.");
    });
});

這裡/ api / Upload是我們將要設定的操作名稱，在我們馬上就會建立的HTML頁面上。最後，但並非最不重要的是，我們需要確保應用程式正在偵聽我們的特定埠，在本例下，為port 2000。

app.listen(2000, function (a) {
    console.log("Listening to port 2000");
});

建立HTML頁面並設定上傳

你可以使用jquery-3.1.1.min.js和jquery.form.min.js的引用建立如下所示的頁面。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Upload images to server using Node JS</title>
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/jquery.form.min.js"></script>

</head>
<body>
    <form id="frmUploader" enctype="multipart/form-data" action="api/Upload/" method="post">
        <input type="file" name="imgUploader" multiple />
        <input type="submit" name="submit" id="btnSubmit" value="Upload" />
    </form>
</body>
</html>

請注意，用於表單的ecctype必須是multipart / form-data，操作必須與我們在API中設定的相同。

建立Ajax提交事件

現在建立ajax事件，在事件中我們將呼叫我們的API。

<script>
        $(document).ready(function () {
            var options = {
                beforeSubmit: showRequest,  // pre-submit callback
                success: showResponse  // post-submit callback
            };

            // bind to the form's submit event
            $('#frmUploader').submit(function () {
                $(this).ajaxSubmit(options);
                // always return false to prevent standard browser submit and page navigation
                return false;
            });
        });

        // pre-submit callback
        function showRequest(formData, jqForm, options) {
            alert('Uploading is starting.');
            return true;
        }

        // post-submit callback
        function showResponse(responseText, statusText, xhr, $form) {
            alert('status: ' + statusText + '\n\nresponseText: \n' + responseText );
        }
    </script>

ajaxSubmit函式是外掛jquery.form.min.js的一部分，因此請確保你已經包含它。