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'); })
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 = '上传成功'; })
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); })
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>
<button onclick="handleClick()">立即下载</button> <iframe name="myIframe" style="display:none"></iframe> <script> const handleClick = () => { window.open('/download/1.png', 'myIframe'); } </script>
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); })
const zipStream = fs.createWriteStream('1.zip'); const zip = archiver('zip'); zip.pipe(zipStream); // 添加整个文件夹到压缩包 zip.directory('upload/'); zip.finalize();
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);
// koa-send path = decode(path) function decode (path) { try { return decodeURIComponent(path) } catch (err) { return -1 } }
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); })
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!