使用NodeJS将文件或图像上传到服务器

cr3364 8年前
   <p>在这篇文章中,我们将看到如何使用NodeJS上传文件或图像到服务器。这里我们将使用Visual Studio和以下NPM包用于我们的开发过程。</p>    <ul>     <li>express</li>     <li>multer</li>     <li>body-parser</li>    </ul>    <p>我们将简要解释这些包的使用。众所周知,NodeJS是一个基于Chrome V8 JavaScript引擎的运行时环境,用于服务器端和网络应用程序。并且它是支持跨平台的开放资源。NodeJS应用程序用纯JavaScript编写。如果你是NodeJS新手,那么我强烈建议你阅读我以前关于Node JS的帖子。</p>    <h2>背景</h2>    <p>几年前,如果你需要上传任何文件或图像到服务器,那么你得完全依赖于服务器端语言如C#和PHP。在JS革命之后,一切都改变了。今天我将告诉你如何使用NodeJS上传文件到服务器,甚至不需要写一行服务器端代码。希望你会喜欢。</p>    <h2>创建空白的Node JS Web应用程序</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5ab9ca92cf58e5115a74c3553c12ed5a.png"></p>    <h2>在package.json中设置依赖关系</h2>    <p>开始之前,我们首先要设置我们的依赖关系。为此,请打开package.json文件并粘贴代码。</p>    <pre>  <code class="language-javascript">{    "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"    }  }</code></pre>    <p>现在,运行NPM install命令,如下所示。</p>    <pre>  <code class="language-javascript">npm install</code></pre>    <p>运行该命令后,可以看到解决方案中安装了依赖关系。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0042c1c9abc3d64b02ab302d4ed8da11.png"></p>    <p>现在我们可以理解这些依赖关系是用来干什么的了。</p>    <p>express</p>    <p>根据Express Team,Express是一个极小且灵活的Node.js Web应用程序框架,为Web和移动应用程序提供了一组强大的功能。Express提供了基本Web应用程序功能的一个薄层,不会掩盖你知道和喜欢的Node.js功能。你可以随时在 <a href="/misc/goto?guid=4958999006662315028" rel="nofollow,noindex">这里</a> 了解更多关于Express Package的信息。</p>    <p>multer</p>    <p>Multer是一个用于处理multipart / form-data的node.js中间件,主要用于上传文件。它构建在busboy基础上以提高效率。点击 <a href="/misc/goto?guid=4959641162423953606" rel="nofollow,noindex">这里</a> 阅读更多关于multer包。</p>    <h2>开始使用依赖关系</h2>    <p>你可以按如下所示创建依赖关系的实例。</p>    <pre>  <code class="language-javascript">var Express = require('express');  var multer = require('multer');  var bodyParser = require('body-parser');  var app = Express();  app.use(bodyParser.json());</code></pre>    <p>然后,创建说明应该在哪里以及如何保存文件/图像的storage。</p>    <pre>  <code class="language-javascript">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);      }  });</code></pre>    <p>每个文件包含以下信息:</p>    <p>fieldname:在窗体中指定的字段名</p>    <p>originalname:用户计算机上文件的名称</p>    <p>encoding:文件的编码类型</p>    <p>mimetype:文件的MIME类型</p>    <p>size:文件的大小(以字节为单位)</p>    <p>destination:保存文件的文件夹</p>    <p>filename:目标文件的名称</p>    <p>path:上传文件的完整路径</p>    <p>buffer:整个文件的Buffer</p>    <p>现在请创建multer对象如下。</p>    <pre>  <code class="language-javascript">var upload = multer({ storage: Storage }).array("imgUploader", 3); //Field name and max count</code></pre>    <p>这里multer接受我们在上一步中创建的storage作为参数。函数</p>    <pre>  <code class="language-javascript">array(fieldname[, maxCount])</code></pre>    <p>接受文件数组,所有文件名都为fieldname。</p>    <p>现在我们该写post和get请求了:</p>    <pre>  <code class="language-javascript">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!.");      });  });</code></pre>    <p>这里/ api / Upload是我们将要设置的操作名称,在我们马上就会创建的HTML页面上。最后,但并非最不重要的是,我们需要确保应用程序正在侦听我们的特定端口,在本例下,为port 2000。</p>    <pre>  <code class="language-javascript">app.listen(2000, function (a) {      console.log("Listening to port 2000");  });</code></pre>    <h2>创建HTML页面并设置上传</h2>    <p>你可以使用jquery-3.1.1.min.js和jquery.form.min.js的引用创建如下所示的页面。</p>    <pre>  <code class="language-javascript"><!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></code></pre>    <p>请注意,用于表单的ecctype必须是multipart / form-data,操作必须与我们在API中设置的相同。</p>    <h2>创建Ajax提交事件</h2>    <p>现在创建ajax事件,在事件中我们将调用我们的API。</p>    <pre>  <code class="language-javascript"><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></code></pre>    <p>ajaxSubmit函数是插件jquery.form.min.js的一部分,因此请确保你已经包含它。</p>    <h2>运行应用程序</h2>    <p>现在请运行你的应用程序。在运行应用程序之前,你总是可以将脚本文件设置为启动文件,要设置的话就右键单击项目并单击属性。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/800da07ea42fe41af256e28aee0ecee1.png"></p>    <p>现在你可以打开命令提示符,你可以在命令提示符处手动定位项目,也可以使用“Open command prompt here”选项。要选择的话,请右键单击你的项目并选择如下选项。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5ede3e3c27b2a54cb4ab8e542197a745.png"></p>    <p>现在在命令提示符中键入node server.js,这将确保你的服务器正在运行。如果一切ok的话,你可以看到如下窗口。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/df09a63a33991cfa79c60d9c9f157883.png"></p>    <p>现在我们可以运行我们的网页,因为服务器已经准备就绪,请访问浏览器并输入网址http://localhost:2000。使用我们创建的文件上传器选择几个文件。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/77ffd2c897a96fdbe81891e3603b0019.png"></p>    <p>如果单击提交,你可以看到我们正在调用我们的方法操作,并且文件已上传。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/33942121dae18b4b940f4550e05cfa0f.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5d98bf3e0d2fb776cc22a5c792ca7923.png"></p>    <p>你总是可以下载附带的源代码以查看完整的代码和应用程序。编码快乐!</p>    <h2>结论</h2>    <p>不知道我有没有遗漏的地方?你觉得这篇文章有用吗?希望你喜欢这篇文章。欢迎给出你宝贵的建议和反馈。</p>    <p> </p>    <p> </p>    <p>来自:http://developer.51cto.com/art/201703/533475.htm</p>    <p> </p>