65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Node JS 上传文件或图像到服务器

Sibeesh Passion
starIconstarIconstarIconstarIconstarIcon

5.00/5 (5投票s)

2016 年 12 月 10 日

CPOL

5分钟阅读

viewsIcon

34734

在本篇文章中，我们将了解如何使用 Node.js 将文件或图片上传到服务器。在这里，我们将使用 Visual Studio 进行开发，并使用以下 NPM 包来简化开发。express multer body-parser 我们将简要解释这些包的用途。

在本篇文章中，我们将了解如何使用 Node.js 将文件或图片上传到服务器。在这里，我们将使用 Visual Studio 进行开发，并使用以下 NPM 包来简化开发。

  • express
  • multer
  • body-parser

我们将简要解释这些包的用途。正如大家所知，Node.js 是一个基于 Chrome V8 JavaScript 引擎构建的运行时环境，用于服务器端和网络应用程序。它是一个开源的，支持跨平台。Node.js 应用程序是用纯 JavaScript 编写的。如果您是 Node.js 新手，我强烈建议您阅读我之前关于 Node.js 的文章，链接在此处：此处。

下载源代码

背景

几年前，如果您需要将任何文件或图片上传到服务器，您完全依赖于服务器端语言，如 C# 和 PHP。自从 Node.js 革命以来，一切都改变了。在这里，我将向您展示如何使用 Node.js 将文件上传到服务器，而无需编写一行服务器端代码。我希望您会喜欢这个。

创建一个空白的 Node.js Web 应用程序

创建一个空白的 Node.js Web 应用程序。

new_node_js_web_application

new_node_js_web_application

在 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 安装命令，如下所示。

npm install

运行命令后，您可以看到依赖项已安装在解决方案中。

npm-packages

npm-packages

现在我们可以理解这些依赖项的用途了。

  • express

根据 Express 团队的说法，Express 是一个简洁而灵活的 Node.js Web 应用程序框架，为 Web 和移动应用程序提供了强大的功能集。Express 提供了一个基础 Web 应用程序功能的精简层，同时不隐藏您所熟悉和喜爱的 Node.js 功能。您可以通过 此处 了解更多关于 Express 包的信息。

  • 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());

然后，是时候创建一个存储了，它指定了文件/图片应该保存在哪里以及如何保存。

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 : 整个文件的缓冲区

现在，请按如下方式创建 multer 对象。

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

这里 multer 将我们在上一步中创建的存储作为参数。该函数

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 页面中设置的 action 名称。最后但同样重要的是，我们需要确保应用程序正在监听我们指定的端口，在本例中是端口 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>

请注意，您的表单的 enctype 必须是 multipart/form-data，并且 action 必须与我们在 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 插件的一部分，所以请确保您已包含它。

运行您的应用程序

现在请运行您的应用程序。在运行应用程序之前，您可以始终将脚本文件设置为启动文件。要设置它，请右键单击您的项目并单击属性。

set-start-up-file

set-start-up-file

现在您可以打开命令提示符，可以在命令提示符中手动定位您的项目，或者使用“在此处打开命令提示符”选项。要选择，请右键单击您的项目并选择如下选项。

open_command_prompt_here_option

open_command_prompt_here_option

现在在您的命令提示符中输入 node server.js，这将确保您的服务器正在运行。如果一切正常，您将看到如下窗口。

node_server_js_output

node_server_js_output

由于我们的服务器已准备就绪，现在可以运行我们的网页了。请转到您的浏览器并输入 URL https://:2000。使用我们创建的文件上传器选择一些文件。

select_fiels_in_file_upload

select_fiels_in_file_upload

如果您点击提交，您将看到我们正在调用我们的方法 action，文件已上传。

file_uploaded_successfully_

file_uploaded_successfully_

solution_explorer_window_after_saving_files

solution_explorer_window_after_saving_files

您可以随时下载附加的源代码以查看完整的代码和应用程序。祝您编码愉快！。

另请参阅

结论

我是否遗漏了您认为可能需要的内容？您是否认为这篇文章有用？我希望您喜欢这篇文章。请与我分享您宝贵的建议和反馈。

轮到你了。你怎么看？

没有评论的博客不是博客，但请尽量保持在主题内。如果您有与本帖无关的问题，最好将其发布在 C# Corner、Code Project、Stack Overflow、Asp.Net Forum 上，而不是在此处评论。在 Twitter 上分享或通过电子邮件向我发送您问题的链接，如果我可以，我一定会尽力提供帮助。

诚挚地
Sibeesh Venu

© . All rights reserved.