使用NodeJS將文件或圖像上傳到服務(wù)器

作者：小峰 2017-03-02 11:58:31

在這篇文章中，我們將看到如何使用NodeJS上傳文件或圖像到服務(wù)器。這里我們將使用Visual Studio和以下NPM包用于我們的開發(fā)過程。

express
multer
body-parser

我們將簡要解釋這些包的使用。眾所周知，NodeJS是一個(gè)基于Chrome V8 JavaScript引擎的運(yùn)行時(shí)環(huán)境，用于服務(wù)器端和網(wǎng)絡(luò)應(yīng)用程序。并且它是支持跨平臺的開放資源。NodeJS應(yīng)用程序用純JavaScript編寫。如果你是NodeJS新手，那么我強(qiáng)烈建議你閱讀我以前關(guān)于Node JS的帖子。

下載源代碼

使用Node JS上傳文件或圖像到服務(wù)器

背景

幾年前，如果你需要上傳任何文件或圖像到服務(wù)器，那么你得完全依賴于服務(wù)器端語言如C#和PHP。在JS革命之后，一切都改變了。今天我將告訴你如何使用NodeJS上傳文件到服務(wù)器，甚至不需要寫一行服務(wù)器端代碼。希望你會喜歡。

創(chuàng)建空白的Node JS Web應(yīng)用程序

在package.json中設(shè)置依賴關(guān)系

開始之前，我們首先要設(shè)置我們的依賴關(guān)系。為此，請打開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"
  }
}

現(xiàn)在，運(yùn)行NPM install命令，如下所示。

npm install

運(yùn)行該命令后，可以看到解決方案中安裝了依賴關(guān)系。

現(xiàn)在我們可以理解這些依賴關(guān)系是用來干什么的了。

express

根據(jù)Express Team，Express是一個(gè)極小且靈活的Node.js Web應(yīng)用程序框架，為Web和移動應(yīng)用程序提供了一組強(qiáng)大的功能。Express提供了基本W(wǎng)eb應(yīng)用程序功能的一個(gè)薄層，不會掩蓋你知道和喜歡的Node.js功能。你可以隨時(shí)在這里了解更多關(guān)于Express Package的信息。

multer

Multer是一個(gè)用于處理multipart / form-data的node.js中間件，主要用于上傳文件。它構(gòu)建在busboy基礎(chǔ)上以提高效率。點(diǎn)擊這里閱讀更多關(guān)于multer包。

開始使用依賴關(guān)系

你可以按如下所示創(chuàng)建依賴關(guān)系的實(shí)例。

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

然后，創(chuàng)建說明應(yīng)該在哪里以及如何保存文件/圖像的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);
    }
});

每個(gè)文件包含以下信息：

fieldname：在窗體中指定的字段名

originalname：用戶計(jì)算機(jī)上文件的名稱

encoding：文件的編碼類型

mimetype：文件的MIME類型

size：文件的大小（以字節(jié)為單位）

destination：保存文件的文件夾

filename：目標(biāo)文件的名稱

path：上傳文件的完整路徑

buffer：整個(gè)文件的Buffer

現(xiàn)在請創(chuàng)建multer對象如下。

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

這里multer接受我們在上一步中創(chuàng)建的storage作為參數(shù)。函數(shù)

array(fieldname[, maxCount])

接受文件數(shù)組，所有文件名都為fieldname。

現(xiàn)在我們該寫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是我們將要設(shè)置的操作名稱，在我們馬上就會創(chuàng)建的HTML頁面上。***，但并非最不重要的是，我們需要確保應(yīng)用程序正在偵聽我們的特定端口，在本例下，為port 2000。

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

創(chuàng)建HTML頁面并設(shè)置上傳

你可以使用jquery-3.1.1.min.js和jquery.form.min.js的引用創(chuàng)建如下所示的頁面。

<!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中設(shè)置的相同。

創(chuàng)建Ajax提交事件

現(xiàn)在創(chuàng)建ajax事件，在事件中我們將調(diào)用我們的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>