Nodejs+expressでファイルをアップロード-jsチュートリアル-php.cn

Nodejs+expressでファイルをアップロード

php中世界最好的语言

リリース： 2018-06-15 14:40:37

オリジナル

1596 人が閲覧しました

今回は、nodejs+expressでファイルをアップロードする際の注意点を紹介します。以下は実際のケースですので、見てみましょう。

この記事の例では、nodejs が Express に基づいてファイルのアップロードを実装する方法を説明します。ご参考までに、詳細は以下の通りです:

以前、個人プロジェクトに取り組んでいたときに、nodejsサーバーを使用してファイルをアップロードしました。

ファイルをアップロードする際には、expressのmultipartyを使用しています。もちろん、connect-multipartyミドルウェアを使用して実装することもできますが、connect-multipartyミドルウェアの正式な使用は推奨されていないようです。早速、以下のコードを見てみましょう。

手順:

(1) Expressを使用してプロジェクトを作成しますデフォルトではjadeテンプレートエンジンですが、私はまだhtmlに慣れているので、htmlテンプレートに変更しました。
(2) プロジェクトディレクトリに、npm install multiparty で必要なコンポーネントをインストールします。
(3) views/index.htmlを修正し、ファイルアップロードフォームを追加します。

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) ページのアップロードと応答のアップロードのためのバックグラウンドコードを実装するために、routes/index.js を変更します。

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;

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

IP が vue+webpack+myproject プロジェクトにアクセスできない対処方法

vue-cli+webpack が新しいプロジェクトを作成できない

preload() 関数と画像のアップロード

を使用してください

以上がNodejs+expressでファイルをアップロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。