Nodejs Advanced: Beispiel für einen Datei-Upload basierend auf Express+Multer

Übersicht

Das Hochladen von Bildern ist eine häufig verwendete Funktion in der Webentwicklung, und die Node-Community bietet diesbezüglich auch relativ umfassende Unterstützung.

Zu den häufig verwendeten Open-Source-Komponenten gehören Multer, Formidable usw. Mit Hilfe dieser beiden Open-Source-Komponenten kann das Hochladen von Bildern problemlos durchgeführt werden.

In diesem Artikel werden hauptsächlich die folgenden Inhalte erläutert. In den folgenden Kapiteln werden die technischen Implementierungsdetails ausführlicher erläutert.

Grundlegendes Beispiel: Verwenden Sie Express und Multer, um einzelne und mehrere Bilder hochzuladen.

Gemeinsame API: Informationen zu hochgeladenen Bildern abrufen.

Erweiterte Verwendung: Passen Sie den Pfad und Namen des gespeicherten Bildes an.

Umgebungsinitialisierung

ist sehr einfach, nur eine Befehlszeile.

npm install express multer multer --save

Unter jedem Beispiel befinden sich die folgenden zwei Dateien

➜ upload-custom-filename git:(master) ✗ tree -L 1
.
├── app.js # 服务端代码，用来处理文件上传请求
├── form.html # 前端页面，用来上传文件

Grundlegendes Beispiel: Einzelbild-Upload

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

Der Code kann 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 abrufen

Oft müssen wir nicht nur das Bild auf dem Server speichern, sondern auch noch viele andere Dinge erledigen, beispielsweise die 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 in der Konsole ausgedruckt angezeigt.

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

Benutzerdefinierte Datei Upload-Pfad und -Name

Manchmal möchten wir den Datei-Upload-Pfad und -Namen anpassen, und Multer kann dies auch problemlos implementieren.

Anpassen des lokalen Speicherpfads

Es ist sehr einfach. Wenn wir beispielsweise Dateien in das My-Upload-Verzeichnis hochladen möchten, ändern Sie einfach das Zielkonfigurationselement.

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

Der Code ist etwas länger, aber ebenso 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, schauen Sie einfach vorbei 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.