Home > Article > Web Front-end > Detailed explanation of file upload case using nodejs+express

Detailed explanation of file upload case using nodejs+express

php中世界最好的语言Original: 2018-05-10 10:29:272110browse

This time I will bring you nodejs express implementationFile uploadDetailed case explanation, nodejs express implementation file uploadWhat are the precautions, the following is a practical case, let's take a look.

When I was working on a personal project some time ago, I used the nodejs server to upload files. Now I will summarize this as a record.

I upload files based on express's multiparty. Of course, it can also be implemented using connect-multipartymiddleware, but the official does not seem to recommend the use of connect-multiparty middleware. Without further ado, let’s look at the code below.

Steps:

(1) Use express to create the project. The default is jadetemplate engine, but still I am used to html, so I changed it to html template.
(2) In the project directory, install the necessary components through npm install multiparty.
(3) Modify views/index.html and add a file upload form.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上传文件</title>
</head>
<body>
  上传文件
  <form method=&#39;post&#39;, action=&#39;/file/uploading&#39;, enctype=&#39;multipart/form-data&#39;>
    <input type="file" name="inputFile">
    <input type="submit" value="上传">
  </form>
</body>
</html>

(4) Modify routes/index.js to implement the background code for uploading pages and uploading responses.

var express = require('express');
var router = express.Router();
var multiparty = require('multiparty');
var util = require('util');
var fs = require('fs');
/* 上传页面. */
router.get('/', function(req, res, next) {
 //res.render('./views/index');
 res.sendfile('./views/index.html');
});
/* 上传 */
router.post('/file/uploading', function(req, res, next) {
  /* 生成multiparty对象，并配置上传目标路径 */
  var form = new multiparty.Form();
  /* 设置编辑 */
  form.encoding = 'utf-8';
  //设置文件存储路劲
  form.uploadDir = './public/files';
  //设置文件大小限制
  form.maxFilesSize = 2 * 1024 * 1024;
  // form.maxFields = 1000;  //设置所有文件的大小总和
  //上传后处理
  form.parse(req, function(err, fields, files) {
    var filesTemp = JSON.stringify(files, null, 2);
    if(err) {
      console.log('parse error:' + err);
    }else {
      console.log('parse files:' + filesTemp);
      var inputFile = files.inputFile[0];
      var uploadedPath = inputFile.path;
      var dstPath = './public/files' + inputFile.originalFilename;
      //重命名为真实文件名
      fs.rename(uploadedPath, dstPath, function(err) {
        if(err) {
          console.log('rename error:' + err);
        }else {
          console.log('rename ok');
        }
      })
    }
    res.writeHead(200, {'content-type': 'text/plain;charset=utf-8'});
    res.write('received upload:\n\n');
    res.end(util.inspect({fields: fields, files: filesTemp}))
  })
})
module.exports = router;

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed explanation of file upload case using nodejs+express

Related articles