Maison > interface Web > js tutoriel > le corps du texte

Le middleware Nodejs+express implémente le téléchargement de fichiers

青灯夜游
Libérer: 2021-04-16 11:00:49
avant
2303 Les gens l'ont consulté

Cet article vous donnera une introduction détaillée à la méthode de téléchargement de fichiers Nodejs. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Le middleware Nodejs+express implémente le téléchargement de fichiers

Lorsque j'utilise nodejs pour réaliser des projets, je dois utiliser la fonction de téléchargement de fichiers. J'ai cherché de nombreux tutoriels sur Internet et trouvé un middleware express pour le traitement Le type de données du formulaire peut facilement enregistrer les données du fichier du formulaire sur le serveur. multipart/form-data

Introduction


multer est un middleware de téléchargement de fichiers node.js Il est développé sur la base de busboy Les données du formulaire téléchargé doivent être de type

, sinon elles. signalera une erreur. [Recommandations associées : "multipart/form-datatutoriel nodejs"]

Utilisation simple


Définir la mémoire

Multer comme intermédiaire de fichier express , nous pouvons facilement personnaliser le répertoire des fichiers téléchargés et le nom du fichier enregistré. Examinons d'abord l'utilisation la plus simple,

adresse demo1 :

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);
        }
    })
});
Copier après la connexion

Nous créons d'abord un objet de téléchargement. La fonction de destination dans cet objet est utilisée pour définir le dossier dans lequel le fichier téléchargé est stocké ; la fonction filename Utilisée pour modifier le nom du fichier téléchargé stocké sur le serveur. Ici, nous ajoutons un horodatage pour le distinguer simplement. Les deux fonctions sont implémentées via des fonctions de rappel. Ces deux fonctions seront appelées une fois pour chaque téléchargement. Si plusieurs fichiers sont téléchargés, ces deux fonctions seront appelées plusieurs fois. La séquence d'appel consiste à appeler d'abord la destination, puis à appeler le nom du fichier.

Il y aura un objet

dans les deux fonctions, qui représente l'objet fichier actuellement téléchargé et possède les attributs suivants : file

    fieldname : le nom du champ téléchargé
  • originalname : nom du fichier téléchargé
  • encoding : type d'encodage du fichier
  • mimetype : type MIME du fichier

Pièce jointe : certaines couramment utilisées ceux de type MIME

Définir le rappel de route

//单个文件上传
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
    });
});
Copier après la connexion

Lors de la définition de la fonction de rappel de route dans express, mettre l'objet de téléchargement défini ajouté comme middleware. S'il s'agit d'un seul fichier, utilisez la méthode

. S'il s'agit de plusieurs fichiers, utilisez la méthode single. Les deux méthodes nécessitent de transmettre un nom de champ défini sur la page. array

Dans la fonction de rappel de la route, l'objet de requête a déjà un attribut de fichier (téléchargement d'un seul fichier) ou un attribut de fichiers (plusieurs fichiers téléchargés). L'attribut de fichiers est un tableau. Chaque objet du tableau a le. attributs suivants. :

    fieldname : Nom du champ téléchargé
  • originalname : Nom du fichier téléchargé
  • encodage : Type d'encodage du fichier
  • mimetype : Fichier MIME tapez
  • destination : répertoire stocké (cohérent avec le nom du répertoire dans la fonction de rappel de destination)
  • nom de fichier : nom de fichier enregistré (cohérent avec le nom de fichier dans la fonction de rappel de nom de fichier)
  • path : chemin relatif à enregistrer
  • size : taille du fichier (unité : octet)
Nous pouvons constater que l'objet fichier dans la fonction de rappel de routage est plus grand que diskStorage L'objet fichier a plusieurs attributs supplémentaires. En effet, le fichier n'a pas été enregistré dans diskStorage, et seuls les attributs généraux du fichier peuvent être connus et le fichier de fonction de rappel de la route a été enregistré sur le serveur, le fichier ; le chemin de sauvegarde et les tailles du fichier sont toutes connues.

Téléchargement mixte

Parfois, nous pouvons avoir besoin d'utiliser des noms de champs pour diviser les fichiers téléchargés, par exemple pour télécharger plusieurs images. Carte d'identité et photo de profil. Bien qu'il puisse être séparé en deux interfaces, cela entraînera une série d'autres problèmes. multer prend en charge la division des images en noms de champs.

adresse demo3

//多字段名上传
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:''
        })
    });
});
Copier après la connexion

a également l'attribut

ici, mais cet attribut n'est pas un tableau, mais un objet complexe. Il y a plusieurs attributs dans cet objet, chaque attribut Le nom est. un nom de champ, et sous chaque attribut se trouve un tableau. Sous le tableau se trouvent les objets fichier. La structure est à peu près la suivante : req.files

{
    "avatar":[{
        fieldname: "",
        originalname: ""
        //...
    }],
    "gallery":[{
        fieldname: "",
        originalname: ""
        //...
    }]
}
Copier après la connexion

Filtrer le téléchargement de fichiers

<🎜. >Lors du téléchargement de fichiers, certains types de fichiers dont nous n'avons pas besoin sont parfois téléchargés et nous devons filtrer certains fichiers inutiles.
Adresse démo2

.

Filtrage par type de fichier

var upload = multer({
    //...其他代码
    fileFilter: function(req, file, cb){
        if(file.mimetype == &#39;image/png&#39;){
            cb(null, true)
        } else {
            cb(null, false)
        }
    }
});
Copier après la connexion
Lors de la définition de la mémoire, ajoutez une fonction fileFilter pour filtrer ce dont nous n'avons pas besoin de fichier , dans la fonction de rappel, nous passons true/false pour indiquer s'il faut le sauvegarder ; si false est passé, la fonction de destination et la fonction de nom de fichier ne seront pas appelées.

文件大小和数量过滤

var upload = multer({
    //...其他代码
    limits:{
        //限制文件大小10kb
        fileSize: 10*1000,
        //限制文件数量
        files: 5
    }
});
Copier après la connexion

在定义存储器的时候,新增一个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(&#39;singleFile&#39;);
app.post(&#39;/upload/single&#39;,(req,res)=>{
    singleUpload(req,res,(err)=>{
        if(!!err){
            console.log(err.message)
            res.json({
                code: &#39;2000&#39;,
                type:&#39;single&#39;,
                originalname: &#39;&#39;,
                msg: err.message
            })
            return;
        }
        if(!!req.file){
            res.json({
                code: &#39;0000&#39;,
                type:&#39;single&#39;,
                originalname: req.file.originalname,
                msg: &#39;&#39;
            })
        } else {
            res.json({
                code: &#39;1000&#39;,
                type:&#39;single&#39;,
                originalname: &#39;&#39;,
                msg: &#39;&#39;
            })
        }
    });
});

//多个文件上传
let multerUpload = upload.array(&#39;multerFile&#39;);
app.post(&#39;/upload/multer&#39;, (req,res)=>{
    multerUpload(req,res,(err)=>{
        if(!!err){
            res.json({
                code: &#39;2000&#39;,
                type:&#39;multer&#39;,
                fileList:[],
                msg: err.message
            });
        }
        let fileList = [];
        req.files.map((elem)=>{
            fileList.push({
                originalname: elem.originalname
            })
        });
        res.json({
            code: &#39;0000&#39;,
            type:&#39;multer&#39;,
            fileList:fileList,
            msg:&#39;&#39;
        });
    });
});
Copier après la connexion

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal