ホームページ > ウェブフロントエンド > jsチュートリアル > Nodejs+expressミドルウェアでファイルアップロードを実装

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

青灯夜游
リリース: 2021-04-16 11:00:49
転載
2352 人が閲覧しました

この記事では、ファイルをアップロードする 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 サイトの他の関連記事を参照してください。

ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート