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

Detailed explanation of file upload case using nodejs+express

php中世界最好的语言
Release: 2018-05-10 10:29:27
Original
2204 people have browsed it

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>
Copy after login

(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;
Copy after login

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!

Recommended reading:

Webpack packaging and compression js and css tutorial instructions

React-native packaging plug-in swiper usage steps detailed explanation

What are the ways to encrypt passwords in nodejs

The above is the detailed content of Detailed explanation of file upload case using nodejs+express. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template