NodeJS Advanced: Datei-Upload basierend auf Express Multer

Umgebungsinitialisierung

ist sehr einfach, nur eine Befehlszeile.

npm install express multer multer --save

Unter jedem Beispiel gibt es die folgenden zwei Dateien

➜ upload-custom-filename git:(master ) ✗ tree -L 1.
├── app.js # Servercode, der zum Verarbeiten von Datei-Upload-Anfragen verwendet wird ├── form.html # Front-End-Seite, die zum Hochladen von Dateien verwendet wird

Einfaches Beispiel: Einzelbild-Upload

Den vollständigen Beispielcode finden Sie hier.

app.js.

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

var app = express();
var upload = multer({ dest: 'upload/' });

// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
    res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
    var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
    res.send(form);
});

app.listen(3000);

form.html.

<form action="/upload-single" method="post" enctype="multipart/form-data">
    <h2>单图上传</h2>
    <input type="file" name="logo">
    <input type="submit" value="提交">
</form>

Führen Sie den Dienst aus.

node app.js

Besuchen Sie http://127.0.0.1:3000/form, wählen Sie das Bild aus, klicken Sie auf „Senden“, fertig. Anschließend sehen Sie im Upload-Verzeichnis ein zusätzliches Bild.

Grundlegendes Beispiel: Hochladen mehrerer Bilder

Den vollständigen Beispielcode finden Sie hier.

Der Code könnte nicht einfacher sein, ändern Sie einfach den vorherigen upload.single('logo') in upload.array('logo', 2). Zeigt an: Unterstützt das gleichzeitige Hochladen von zwei Bildern und das Namensattribut ist ein Logo.

app.js.

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

var app = express();
var upload = multer({ dest: 'upload/' });

// 多图上传
app.post('/upload', upload.array('logo', 2), function(req, res, next){
    res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
    var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
    res.send(form);
});

app.listen(3000);

form.html.

<form action="/upload-multi" method="post" enctype="multipart/form-data">
    <h2>多图上传</h2>
    <input type="file" name="logos">
    <input type="file" name="logos">
    <input type="submit" value="提交">
</form>

Die gleichen Testschritte werden nicht wiederholt.

Informationen zum hochgeladenen Bild erhalten

Den vollständigen Beispielcode finden Sie hier.

Oft müssen wir nicht nur Bilder auf dem Server speichern, sondern auch noch viele andere Dinge erledigen, beispielsweise Bildinformationen in der Datenbank speichern.

Häufig verwendete Informationen wie ursprünglicher Dateiname, Dateityp, Dateigröße, lokaler Speicherpfad usw. Mit Hilfe von Multer können wir diese Informationen ganz einfach erhalten.

Dies ist immer noch ein Beispiel für das Hochladen einer einzelnen Datei. Zu diesem Zeitpunkt schreibt Multer die Dateiinformationen in req.file, wie im folgenden Code gezeigt.

app.js.

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

var app = express();
var upload = multer({ dest: 'upload/' });

// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
    var file = req.file;

    console.log('文件类型：%s', file.mimetype);
    console.log('原始文件名：%s', file.originalname);
    console.log('文件大小：%s', file.size);
    console.log('文件保存路径：%s', file.path);

    res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
    var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
    res.send(form);
});

app.listen(3000);

form.html.

<form action="/upload" method="post" enctype="multipart/form-data">
    <h2>单图上传</h2>
    <input type="file" name="logo">
    <input type="submit" value="提交">
</form>

Starten Sie den Dienst und laden Sie die Datei hoch. Die Informationen werden auf der Konsole angezeigt.

Dateityp: image/png
Originaldateiname: 1.png
Dateigröße: 18379 Dateispeicherpfad: upload/b7e4bb22375695d92689e45b551873d9

Benutzerdefinierter Datei-Upload-Pfad, Name

Manchmal möchten wir den Pfad und Namen des Datei-Uploads anpassen, Multer kann auch einfach implementiert werden.

Das Anpassen des lokalen Speicherpfads

ist sehr einfach. Wenn wir beispielsweise Dateien in das Verzeichnis „my-upload“ hochladen möchten, ändern Sie einfach das Konfigurationselement „dest“.

var upload = multer({ dest: 'upload/' });

Unter der obigen Konfiguration werden alle Ressourcen im selben Verzeichnis gespeichert. Manchmal müssen wir die Einstellungen für verschiedene Dateien personalisieren. Weitere Informationen finden Sie im nächsten Abschnitt.

Passen Sie den lokal gespeicherten Dateinamen an

Den vollständigen Beispielcode finden Sie hier.

Der Code ist etwas länger, aber genauso einfach. Multer stellt den Speicherparameter zur Verfügung, um den Pfad und Dateinamen der Ressourcenspeicherung zu personalisieren.

Hinweise zur Verwendung lauten wie folgt:

Ziel: Legen Sie den Speicherpfad der Ressource fest. Beachten Sie, dass es ohne dieses Konfigurationselement standardmäßig unter /tmp/uploads gespeichert wird. Zusätzlich muss der Pfad selbst erstellt werden.

Dateiname: Legen Sie den Dateinamen der lokal gespeicherten Ressource fest.

app.js.

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

var app = express();

var createFolder = function(folder){
    try{
        fs.accessSync(folder); 
    }catch(e){
        fs.mkdirSync(folder);
    }  
};

var uploadFolder = './upload/';

createFolder(uploadFolder);

// 通过 filename 属性定制
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, uploadFolder);    // 保存的路径，备注：需要自己创建
    },
    filename: function (req, file, cb) {
        // 将保存文件名设置为 字段名 + 时间戳，比如 logo-1478521468943
        cb(null, file.fieldname + '-' + Date.now());  
    }
});

// 通过 storage 选项来对 上传行为 进行定制化
var upload = multer({ storage: storage })

// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
    var file = req.file;
    res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
    var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
    res.send(form);
});

app.listen(3000);

form.html.

<form action="/upload" method="post" enctype="multipart/form-data">
    <h2>单图上传</h2>
    <input type="file" name="logo">
    <input type="submit" value="提交">
</form>

Ich werde nicht näher auf die Testschritte eingehen, besuchen Sie es einfach und Sie werden die Wirkung erfahren.

Geschrieben auf der Rückseite

Dieser Artikel führt in die grundlegende Verwendung von Multer ein, ohne zu viele Prinzipien abzudecken. Wie das Sprichwort sagt: Es ist besser, einem Mann das Angeln beizubringen, als ihm das Angeln beizubringen. In den folgenden Kapiteln werden die Details des Datei-Uploads erläutert, damit die Leser ein tieferes Verständnis für das Datei-Upload erhalten.