【轉】使用NodeJS將文件或圖像上傳到服務器

本文轉載自查看原文 2017-05-20 17:05 11990 nodeJS

原文：http://www.tuicool.com/articles/Y3iau2B

在這篇文章中，我們將看到如何使用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的一部分，因此請確保你已經包含它。