Heim > Web-Frontend > js-Tutorial > Hauptteil

Koa2 ermöglicht das Hochladen und Herunterladen von Dateien

php中世界最好的语言
Freigeben: 2018-05-03 09:23:54
Original
1657 Leute haben es durchsucht

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zum Implementieren des Datei-Uploads in Koa2 geben. Was sind die Vorsichtsmaßnahmen für die Implementierung des Datei-Uploads und -Downloads in Koa2? Praktischer Fall, werfen wir einen Blick darauf.

Vorwort

Uploads und Downloads kommen in Webanwendungen recht häufig vor, egal ob es sich um Bilder oder andere Dateien handelt. In Koa gibt es viele Middleware, die uns helfen können, Funktionen schnell zu implementieren.

Datei-Upload

Wenn wir Dateien im Frontend hochladen, laden wir sie über Formulare hoch, aber die hochgeladenen Dateien können nicht wie normale Parameter auf dem Server über ctx weitergeleitet werden Seite. .request.body erhält. Wir können die Koa-Body-Middleware verwenden, um das Hochladen von Dateien zu verwalten, wodurch der Anforderungstext in ctx.request abgelegt werden kann.

// app.js
const koa = require('koa');
const app = new koa();
const koaBody = require('koa-body');
app.use(koaBody({
  multipart: true,
  formidable: {
    maxFileSize: 200*1024*1024 // 设置上传文件大小最大限制,默认2M
  }
}));
app.listen(3001, ()=>{
  console.log('koa is listening in 3001');
})
Nach dem Login kopieren
Nachdem Sie die Middleware verwendet haben, können Sie den hochgeladenen Dateiinhalt in ctx.request.body.files abrufen. Es muss darauf geachtet werden, maxFileSize festzulegen, andernfalls wird ein Fehler gemeldet, sobald die hochgeladene Datei das Standardlimit überschreitet.

Nach Erhalt der Datei müssen wir die Datei im Verzeichnis speichern und eine URL an das Frontend zurückgeben. Der Prozess im Knoten ist

  1. Erstellen Sie einen lesbaren Stream-Const-Reader = fs.createReadStream(file.path)

  2. Erstellen Sie einen beschreibbaren Stream-Const-Writer = fs.createWriteStream('upload/newpath.txt')

  3. Der lesbare Stream schreibt den beschreibbaren Stream über die Pipe reader.pipe(writer)

  4. const router = require('koa-router')();
    const fs = require('fs');
    router.post('/upload', async (ctx){
     const file = ctx.request.body.files.file; // 获取上传文件
     const reader = fs.createReadStream(file.path); // 创建可读流
     const ext = file.name.split('.').pop(); // 获取上传文件扩展名
     const upStream = fs.createWriteStream(`upload/${Math.random().toString()}.${ext}`); // 创建可写流
     reader.pipe(upStream); // 可读流通过管道写入可写流
     return ctx.body = '上传成功';
    })
    Nach dem Login kopieren
Diese Methode eignet sich zum Hochladen von Bildern, Textdateien, komprimierten Dateien usw.

Datei-Download

koa-send ist eine statische Dateidienst-Middleware, die zur Implementierung der Datei-Download-Funktion verwendet werden kann.

const router = require('koa-router')();
const send = require('koa-send');
router.post('/download/:name', async (ctx){
 const name = ctx.params.name;
 const path = `upload/${name}`;
 ctx.attachment(path);
  await send(ctx, path);
})
Nach dem Login kopieren
Es gibt zwei Methoden zum Herunterladen im Frontend:

window.open und Formularübermittlung. Hier wird das einfachere window.open verwendet.

<button onclick="handleClick()">立即下载</button>
<script>
 const handleClick = () => {
 window.open('/download/1.png');
 }
</script>
Nach dem Login kopieren
Die Standardeinstellung von window.open besteht darin, ein neues Fenster zu öffnen, zu blinken und dann zu schließen, was dem Benutzer kein gutes Erlebnis bietet. Sie können den zweiten Parameter window.open('/download/1 hinzufügen .png ', '_self'); , sodass es direkt im aktuellen Fenster heruntergeladen wird. Dadurch wird jedoch die aktuelle Seite durch die URL ersetzt, wodurch Seitenereignisse wie beforeunload ausgelöst werden. Wenn Ihre Seite auf dieses Ereignis lauscht und einige Vorgänge ausführt, hat dies Auswirkungen. Dann können Sie auch ein verstecktes Iframe-Fenster verwenden, um den gleichen Effekt zu erzielen.

<button onclick="handleClick()">立即下载</button>
<iframe name="myIframe" style="display:none"></iframe>
<script>
 const handleClick = () => {
 window.open('/download/1.png', 'myIframe');
 }
</script>
Nach dem Login kopieren

Batch-Download

Es gibt keinen Unterschied zwischen Batch-Download und Einzel-Download. Führen Sie einfach mehrere weitere Downloads durch. Damit gibt es wirklich kein Problem. Wäre das Erlebnis nicht besser, wenn Sie so viele Dateien in ein komprimiertes Paket packen und dann nur dieses komprimierte Paket herunterladen würden?

Dateiverpackung

Archiver ist ein Modul, das plattformübergreifende Verpackungsfunktionen in Node.js realisieren kann und ZIP- und TAR-Formate unterstützt.

const router = require('koa-router')();
const send = require('koa-send');
const archiver = require('archiver');
router.post('/downloadAll', async (ctx){
 // 将要打包的文件列表
 const list = [{name: '1.txt'},{name: '2.txt'}];
 const zipName = '1.zip';
 const zipStream = fs.createWriteStream(zipName);
  const zip = archiver('zip');
  zip.pipe(zipStream);
 for (let i = 0; i < list.length; i++) {
 // 添加单个文件到压缩包
 zip.append(fs.createReadStream(list[i].name), { name: list[i].name })
 }
 await zip.finalize();
 ctx.attachment(zipName);
 await send(ctx, zipName);
})
Nach dem Login kopieren
Wenn Sie den gesamten Ordner direkt verpacken, ist es nicht erforderlich, jede Datei zu durchlaufen und an das komprimierte Paket anzuhängen.

const zipStream = fs.createWriteStream('1.zip');
const zip = archiver('zip');
zip.pipe(zipStream);
// 添加整个文件夹到压缩包
zip.directory('upload/');
zip.finalize();
Nach dem Login kopieren
Hinweis: Beim Verpacken des gesamten Ordners wird die generierte komprimierte Paketdatei generiert kann nicht in diesem Ordner gespeichert werden, da es sonst kontinuierlich gepackt wird.

Probleme mit der chinesischen Kodierung

Wenn der Dateiname Chinesisch enthält, können unerwartete Situationen auftreten. Wenn es also beim Hochladen chinesische Zeichen enthält, kodiere ich den Dateinamen mit encodeURI(), um ihn zu speichern, und entschlüssele ihn dann beim Herunterladen mit decodeURI().

ctx.attachment(decodeURI(path));
await send(ctx, path);
Nach dem Login kopieren
ctx.attachment Setzen Sie Content-Disposition auf „attachment“, um den Client anzuweisen, zum Download aufzufordern. Verwenden Sie den entschlüsselten Dateinamen als Namen der herunterzuladenden Datei, sodass beim lokalen Herunterladen weiterhin der chinesische Name angezeigt wird.

Im Quellcode von koa-send wird der Dateipfad jedoch mit decodeURIComponent() dekodiert:

// koa-send
path = decode(path)
function decode (path) {
 try {
  return decodeURIComponent(path)
 } catch (err) {
  return -1
 }
}
Nach dem Login kopieren
Laden Sie zu diesem Zeitpunkt nach der Dekodierung den Pfad herunter, der Chinesisch enthält Pfad auf unserem Server gespeichert Da es sich um einen verschlüsselten Pfad handelt, kann die entsprechende Datei natürlich nicht gefunden werden.

Um dieses Problem zu lösen, lassen Sie es nicht entschlüsseln. Wenn Sie den Koa-Send-Quellcode nicht berühren möchten, können Sie stattdessen eine andere Middleware-Koa-Sendfile verwenden.

const router = require('koa-router')();
const sendfile = require('koa-sendfile');
router.post('/download/:name', async (ctx){
 const name = ctx.params.name;
 const path = `upload/${name}`;
 ctx.attachment(decodeURI(path));
  await sendfile(ctx, path);
})
Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Welche Funktionen implementiert new() in JS?

Was sind die Verwirrungspunkte bei der Verwendung von JS

Das obige ist der detaillierte Inhalt vonKoa2 ermöglicht das Hochladen und Herunterladen von Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!