目次
はじめに
ファイルのアップロードのフィルター
ホームページ ウェブフロントエンド jsチュートリアル Nodejs+expressミドルウェアでファイルアップロードを実装

Nodejs+expressミドルウェアでファイルアップロードを実装

Apr 16, 2021 am 11:00 AM
nodejs ファイルのアップロード

この記事では、ファイルをアップロードする Nodejs 方法について詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Nodejs+expressミドルウェアでファイルアップロードを実装

nodejs を使用してプロジェクトを実行する場合、ファイルのアップロード機能を使用する必要があり、インターネットで多くのチュートリアルを検索したところ、 マルチパート処理用の Express ミドルウェアを見つけました。 /form-data タイプのフォーム データは、フォーム内のファイル データをサーバーに簡単に保存できます。

はじめに


multer は、node.js ファイルアップロードミドルウェアです。busboy に基づいて開発されています。アップロードされるフォームデータは、multipart/form-data# である必要があります。 ## と入力しないと、エラーが報告されます。 [関連する推奨事項:「nodejs チュートリアル」]

簡単な使用法


#メモリの定義

express の中間として Multer を使用するファイルをアップロードすると、アップロードされたファイルのディレクトリと保存されたファイル名を簡単にカスタマイズできます。まず最も単純な使用法を見てみましょう,

demo1 address:

var express = require('express');
var multer = require('multer');
var app = express();

var upload = multer({
    storage: multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './uploads/');
        },
        filename: function (req, file, cb) {
            //file.originalname上传文件的原始文件名
            var changedName = (new Date().getTime())+'-'+file.originalname;
            cb(null, changedName);
        }
    })
});
ログイン後にコピー

まずアップロード オブジェクトを作成します。このオブジェクトの宛先関数は、アップロードされたファイルが保存されるフォルダーを定義するために使用されます。 filename 関数 サーバーに保存されているアップロードされたファイルのファイル名を変更するために使用されますが、ここでは単純に区別するためにタイムスタンプを追加します。どちらの関数もコールバック関数を通じて実装されます。これら 2 つの関数は、アップロードごとに 1 回呼び出されます。複数のファイルがアップロードされる場合、これら 2 つの関数は複数回呼び出されます。呼び出しシーケンスは、最初に destination を呼び出し、次に filename を呼び出します。

両方の関数に

file オブジェクトが存在します。これは現在アップロードされているファイル オブジェクトを表し、次の属性を持ちます:

    fieldname: アップロードされたフィールド名
  • originalname: アップロードされたファイル名
  • encoding: ファイル エンコーディング タイプ
  • mimetype: ファイル MIME タイプ

Attach : 一般的に使用される MIMEタイプ

ルーティング コールバックの定義

//单个文件上传
app.post('/upload/single',upload.single('singleFile'),(req,res)=>{
    console.log(req.file);
    res.json({
        code: '0000',
        type:'single',
        originalname: req.file.originalname
    })
});

//多个文件上传
app.post('/upload/multer',upload.array('multerFile'),(req,res)=>{
    console.log(req.files);
    let fileList = [];
    req.files.map((elem)=>{
        fileList.push({
            originalname: elem.originalname
        })
    });
    res.json({
        code: '0000',
        type:'multer',
        fileList:fileList
    });
});
ログイン後にコピー

Express でルーティング コールバック関数を定義する場合に定義しますアップロード オブジェクトはミドルウェアとして追加されます。単一ファイルの場合は、

single メソッドを使用します。複数のファイルの場合は、array メソッドを使用します。どちらのメソッドも、ページで定義されたフィールド名を渡す必要があります。

ルーティング コールバック関数では、リクエスト オブジェクトには既にファイル属性 (単一ファイルのアップロード) またはファイル属性 (複数のファイルのアップロード) が含まれています。ファイル属性は配列であり、配列内の各オブジェクトには次のものが含まれます。 :

    fieldname: アップロードされたフィールド名
  • originalname: アップロードされたファイル名
  • encoding: ファイルのエンコード タイプ
  • mimetype: ファイルの MIME タイプ
  • destination: 保存されたディレクトリ (destination コールバック関数のディレクトリ名と同じ)
  • filename: 保存されたファイル名 (filename コールバック関数のファイル名と同じ)
  • path: 保存された相対パス
  • size: ファイルのサイズ (単位: バイト)
ルーティング コールバック関数でファイル オブジェクトが存在することがわかります。のファイル オブジェクトには、さらにいくつかの属性があります。これは、ファイルが diskStorage に保存されておらず、ファイルの一般的な属性しか知ることができないためです。また、ルートのコールバック関数ファイルは、diskStorage に保存されているためです。サーバー、ファイルの保存パス、ファイルのサイズはすべてわかっています。

混合アップロード

複数の画像のアップロードなど、アップロードされたファイルを分割するためにフィールド名を使用する必要がある場合があります。ID をお持ちの場合があります。カードとプロフィール写真。 2 つのインターフェイスに分離できますが、別の一連のトラブルが発生します。 multer は画像をフィールド名に分割することをサポートしています。

demo3 address

//多字段名上传
let multipleFields = upload.fields([
    {name:'avatar'},
    {name:'gallery', maxCount:3},
]);
app.post('/upload/fields', (req,res)=>{
    multipleFields(req,res,(err) => {
        console.log(req.files);
        if(!!err){
            console.log(err.message);
            res.json({
                code: '2000',
                type: 'field',
                msg:err.message
            })
            return;
        }
        var fileList = [];
        for(let item in req.files){
            var fieldItem = req.files[item];
            fieldItem.map((elem) => {
                fileList.push({
                    fieldname: elem.fieldname,
                    originalname: elem.originalname
                })
            });
        }
        res.json({
            code: '0000',
            type: 'field',
            fileList: fileList,
            msg:''
        })
    });
});
ログイン後にコピー

ここには

req.files 属性もありますが、この属性は配列ではなく、複雑なオブジェクトです。多くの属性があり、それぞれ属性名はフィールド名で、各属性の下に配列があり、配列の下にファイル オブジェクトがあります。構造は大まかに次のとおりです:

{
    "avatar":[{
        fieldname: "",
        originalname: ""
        //...
    }],
    "gallery":[{
        fieldname: "",
        originalname: ""
        //...
    }]
}
ログイン後にコピー

ファイルのアップロードのフィルター


ファイルをアップロードするときに、必要のないファイル タイプがアップロードされる場合があるため、不要なファイルをフィルタリングして除外する必要があります。

デモ2アドレス

ファイル タイプ フィルタリング

var upload = multer({
    //...其他代码
    fileFilter: function(req, file, cb){
        if(file.mimetype == 'image/png'){
            cb(null, true)
        } else {
            cb(null, false)
        }
    }
});
ログイン後にコピー

メモリを定義するときに、fileFilter 関数を追加して、ファイルが必要ないものをフィルタリングします。 , コールバック関数では、保存するかどうかを示すために true/false を渡します。false が渡された場合、宛先関数とファイル名関数は呼び出されません。

文件大小和数量过滤

var upload = multer({
    //...其他代码
    limits:{
        //限制文件大小10kb
        fileSize: 10*1000,
        //限制文件数量
        files: 5
    }
});
ログイン後にコピー

在定义存储器的时候,新增一个limits对象,用来控制上传的一些信息,它有以下一些属性:

  • fieldNameSize:field 名字最大长度,默认值:100 bytes
  • fieldSize:field 值的最大长度,默认值:1MB
  • fields:非文件 field 的最大数量
  • fileSize:在multipart表单中, 文件最大长度 (字节单位)
  • files:在multipart表单中, 文件最大数量
  • parts:在multipart表单中, part传输的最大数量(fields + files)

在这边我们把fileSize的值设置得小一点,设为10kb方便测试看效果,但是如果这个时候会发现有报错。因为上传的文件大小很容易就会超过10KB,导致有报错出现,我们就需要在路由回调里对错误的情况进行捕获。

//单个文件上传
let singleUpload = upload.single('singleFile');
app.post('/upload/single',(req,res)=>{
    singleUpload(req,res,(err)=>{
        if(!!err){
            console.log(err.message)
            res.json({
                code: '2000',
                type:'single',
                originalname: '',
                msg: err.message
            })
            return;
        }
        if(!!req.file){
            res.json({
                code: '0000',
                type:'single',
                originalname: req.file.originalname,
                msg: ''
            })
        } else {
            res.json({
                code: '1000',
                type:'single',
                originalname: '',
                msg: ''
            })
        }
    });
});

//多个文件上传
let multerUpload = upload.array('multerFile');
app.post('/upload/multer', (req,res)=>{
    multerUpload(req,res,(err)=>{
        if(!!err){
            res.json({
                code: '2000',
                type:'multer',
                fileList:[],
                msg: err.message
            });
        }
        let fileList = [];
        req.files.map((elem)=>{
            fileList.push({
                originalname: elem.originalname
            })
        });
        res.json({
            code: '0000',
            type:'multer',
            fileList:fileList,
            msg:''
        });
    });
});
ログイン後にコピー

所有的demo代码都在仓库里,地址:https://github.com/acexyf/multerDemo

更多编程相关知识,请访问:编程入门!!

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Nodejs はバックエンド フレームワークですか? Nodejs はバックエンド フレームワークですか? Apr 21, 2024 am 05:09 AM

Node.js は、高いパフォーマンス、スケーラビリティ、クロスプラットフォーム サポート、豊富なエコシステム、開発の容易さなどの機能を備えているため、バックエンド フレームワークとして使用できます。

Nodejsをmysqlデータベースに接続する方法 Nodejsをmysqlデータベースに接続する方法 Apr 21, 2024 am 06:13 AM

MySQL データベースに接続するには、次の手順に従う必要があります。 mysql2 ドライバーをインストールします。 mysql2.createConnection() を使用して、ホスト アドレス、ポート、ユーザー名、パスワード、データベース名を含む接続オブジェクトを作成します。 connection.query() を使用してクエリを実行します。最後に connection.end() を使用して接続を終了します。

gRPC を使用して Golang でファイルのアップロードを実装するにはどうすればよいですか? gRPC を使用して Golang でファイルのアップロードを実装するにはどうすればよいですか? Jun 03, 2024 pm 04:54 PM

gRPC を使用してファイルのアップロードを実装するにはどうすればよいですか?リクエストおよびレスポンスメッセージを含むサポートサービス定義を作成します。クライアントでは、アップロードされるファイルが開かれてチャンクに分割され、gRPC ストリーム経由でサーバーにストリーミングされます。サーバー側では、ファイル チャンクが受信され、ファイルに保存されます。ファイルのアップロードが完了すると、サーバーはアップロードが成功したかどうかを示す応答を送信します。

Nodejsのグローバル変数とは何ですか Nodejsのグローバル変数とは何ですか Apr 21, 2024 am 04:54 AM

Node.js には次のグローバル変数が存在します。 グローバル オブジェクト: グローバル コア モジュール: プロセス、コンソール、require ランタイム環境変数: __dirname、__filename、__line、__column 定数: unknown、null、NaN、Infinity、-Infinity

NodejsとJavaの間に大きな違いはありますか? NodejsとJavaの間に大きな違いはありますか? Apr 21, 2024 am 06:12 AM

Node.js と Java の主な違いは、設計と機能です。 イベント駆動型とスレッド駆動型: Node.js はイベント駆動型で、Java はスレッド駆動型です。シングルスレッドとマルチスレッド: Node.js はシングルスレッドのイベント ループを使用し、Java はマルチスレッド アーキテクチャを使用します。ランタイム環境: Node.js は V8 JavaScript エンジン上で実行され、Java は JVM 上で実行されます。構文: Node.js は JavaScript 構文を使用し、Java は Java 構文を使用します。目的: Node.js は I/O 集中型のタスクに適しており、Java は大規模なエンタープライズ アプリケーションに適しています。

Nodejs インストール ディレクトリ内の npm ファイルと npm.cmd ファイルの違いは何ですか? Nodejs インストール ディレクトリ内の npm ファイルと npm.cmd ファイルの違いは何ですか? Apr 21, 2024 am 05:18 AM

Node.js インストール ディレクトリには、npm と npm.cmd という 2 つの npm 関連ファイルがあります。違いは次のとおりです。拡張子が異なります。npm は実行可能ファイルで、npm.cmd はコマンド ウィンドウのショートカットです。 Windows ユーザー: npm.cmd はコマンド プロンプトから使用できますが、npm はコマンド ラインからのみ実行できます。互換性: npm.cmd は Windows システムに固有ですが、npm はクロスプラットフォームで使用できます。使用上の推奨事項: Windows ユーザーは npm.cmd を使用し、他のオペレーティング システムは npm を使用します。

Nodejs はバックエンド開発言語ですか? Nodejs はバックエンド開発言語ですか? Apr 21, 2024 am 05:09 AM

はい、Node.js はバックエンド開発言語です。これは、サーバー側のビジネス ロジックの処理、データベース接続の管理、API の提供などのバックエンド開発に使用されます。

Nodejsプロジェクトをサーバーにデプロイする方法 Nodejsプロジェクトをサーバーにデプロイする方法 Apr 21, 2024 am 04:40 AM

Node.js プロジェクトのサーバー デプロイメント手順: デプロイメント環境を準備します。サーバー アクセスの取得、Node.js のインストール、Git リポジトリのセットアップ。アプリケーションをビルドする: npm run build を使用して、デプロイ可能なコードと依存関係を生成します。コードをサーバーにアップロードします: Git またはファイル転送プロトコル経由。依存関係をインストールする: サーバーに SSH で接続し、npm install を使用してアプリケーションの依存関係をインストールします。アプリケーションを開始します。node Index.js などのコマンドを使用してアプリケーションを開始するか、pm2 などのプロセス マネージャーを使用します。リバース プロキシの構成 (オプション): Nginx や Apache などのリバース プロキシを使用して、トラフィックをアプリケーションにルーティングします。

See all articles