検索
ホームページウェブフロントエンド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 までご連絡ください。
Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

See all articles

ホット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ヘンタイを無料で生成します。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 Mac版

SublimeText3 Mac版

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

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません