?前言

大家好，我是yma16，本文分享關(guān)于node實(shí)戰(zhàn)——koa實(shí)現(xiàn)文件下載和圖片預(yù)覽。
本文適用對(duì)象：前端初學(xué)者轉(zhuǎn)node方向，在校大學(xué)生，即將畢業(yè)的同學(xué)，計(jì)算機(jī)愛好者。
node系列往期文章
node_windows環(huán)境變量配置
node_npm發(fā)布包
linux_配置node
node_nvm安裝配置
node筆記_http服務(wù)搭建（渲染html、json）
node筆記_讀文件
node筆記_寫文件
node筆記_連接mysql實(shí)現(xiàn)crud
node筆記_formidable實(shí)現(xiàn)前后端聯(lián)調(diào)的文件上傳
node筆記_koa框架介紹
node_koa路由
node_生成目錄
node_讀寫excel
node筆記_讀取目錄的文件
node筆記——調(diào)用免費(fèi)qq的smtp發(fā)送html格式郵箱
node實(shí)戰(zhàn)——搭建帶swagger接口文檔的后端koa項(xiàng)目（node后端就業(yè)儲(chǔ)備知識(shí)）
node實(shí)戰(zhàn)——后端koa結(jié)合jwt連接mysql實(shí)現(xiàn)權(quán)限登錄（node后端就業(yè)儲(chǔ)備知識(shí)）
node實(shí)戰(zhàn)——koa給郵件發(fā)送驗(yàn)證碼并緩存到redis服務(wù)（node后端儲(chǔ)備知識(shí)）
http下載
HTTP下載是通過HTTP協(xié)議從Internet上下載（或上傳）文件的過程。它是一種通過網(wǎng)頁瀏覽器下載文件的常見方式。

通常，HTTP下載發(fā)生在以下情形下：

1. 用戶在網(wǎng)頁瀏覽器中單擊下載鏈接時(shí)，瀏覽器自動(dòng)使用HTTP協(xié)議向服務(wù)器請(qǐng)求文件并將其下載到本地計(jì)算機(jī)。

2. 用戶使用特殊的下載管理器程序（如IDM，迅雷等）來下載文件，這些下載管理器也使用HTTP協(xié)議從服務(wù)器下載文件。

無論使用哪種方式，HTTP下載的基本過程都是相同的：客戶端向服務(wù)器請(qǐng)求文件并接收響應(yīng)，然后將文件下載到本地計(jì)算機(jī)。

?koa-send庫實(shí)現(xiàn)下載

koa-send is a middleware for the Koa web framework that simplifies
sending static files as responses to HTTP requests. It allows you to
serve files from a directory and optionally apply cache-control
headers, send files as attachments, and handle range requests (partial
content). It is commonly used to serve CSS, JavaScript, images, and
other types of static assets.

koa-send 是 Koa Web 框架的中間件，它簡(jiǎn)化了發(fā)送靜態(tài)文件作為對(duì) HTTP 請(qǐng)求的響應(yīng)的過程。它允許您從目錄中提供文件，并選擇性地應(yīng)用緩存控制標(biāo)頭、將文件作為附件發(fā)送以及處理范圍請(qǐng)求（部分內(nèi)容）。它通常用于提供 CSS、JavaScript、圖像和其他類型的靜態(tài)資產(chǎn)。

安裝

$ npm install koa-send

封裝一個(gè)下載exe的功能

const Router = require('koa-router');
const router = new Router();
const send = require('koa-send');

// down exe
router.get('/down/exe', async (ctx) => {
    try{
        const file_path='./db/exe/tools/cat-tools-setup.exe'
        ctx.attachment(file_path);
        await send(ctx, file_path);
    }
    catch(e){
        ctx.body = { code: 0, data:e,msg: 'get label fail'};
    }
});

module.exports=router

下載 ./db/exe/tools/cat-tools-setup.exe對(duì)應(yīng)的文件
實(shí)現(xiàn)效果 https://yongma16.xyz/cat-web/#/

?mime-types庫實(shí)現(xiàn)圖片預(yù)覽

MIME types (Multipurpose Internet Mail Extensions types) are a way to
classify files on the Internet according to their nature and format.
They are used by web servers and browsers to recognize the file type
of a document being requested or transmitted. Examples of MIME types
include:

• text/plain: plain text file
• text/html: HTML (Hypertext Markup Language) file
• image/jpeg: JPEG image file
• image/png: PNG image file
• application/pdf: PDF (Portable Document Format) file
• application/vnd.ms-excel: Microsoft Excel file
• application/vnd.openxmlformats-officedocument.spreadsheetml.sheet: Microsoft Excel OpenXML file
• application/vnd.ms-powerpoint: Microsoft PowerPoint file
• application/vnd.openxmlformats-officedocument.presentationml.presentation:
  Microsoft PowerPoint OpenXML file
• audio/mpeg: MP3 audio file
• video/mp4: MPEG-4 video file. There are many other MIME types for different types of files, and new ones are added as new file formats
  emerge.

MIME 類型（多用途 Internet 郵件擴(kuò)展類型）是一種根據(jù)其性質(zhì)和格式對(duì) Internet 上的文件進(jìn)行分類的方法。Web 服務(wù)器和瀏覽器使用它們來識(shí)別所請(qǐng)求或傳輸?shù)奈臋n的文件類型。MIME 類型的示例包括：

• text/plain：純文本文件
• text/html：HTML（超文本標(biāo)記語言）文件
• image/jpeg：JPEG圖像文件
• image/png：PNG 圖像文件
• application/pdf： PDF（便攜式文件格式）文件
• application/vnd.ms-excel：Microsoft Excel 文件
• application/vnd.openxmlformats-officedocument.spreadsheetml.sheet：Microsoft Excel OpenXML 文件
• application/vnd.ms-powerpoint：Microsoft PowerPoint 文件
• application/vnd.openxmlformats-officedocument.presentationml.presentation：Microsoft
• PowerPoint OpenXML 文件
• audio/mpeg：MP3 音頻文件
• video/mp4：MPEG-4 視頻文件。
  對(duì)于不同類型的文件，還有許多其他 MIME 類型，并且隨著新文件格式的出現(xiàn)，會(huì)添加新的 MIME 類型。
  安裝mime-types

$ npm install mime-types

封裝渲染的api

const Router = require('koa-router');
const router = new Router();
const mime = require('mime-types');
const fs=require('fs')
// down exe
router.get('/media/view', async (ctx) => {
    try{
        const {path}=ctx.query
        const filePath='./media/static/'+path
        let file = null;
        try {
            file = fs.readFileSync(filePath); //讀取文件
        } catch (error) {
            //如果服務(wù)器不存在請(qǐng)求的圖片，返回默認(rèn)圖片
            file = fs.readFileSync('./media/static/404.png'); //讀取文件
        }

        let mimeType = mime.lookup(filePath); //讀取圖片文件類型
        ctx.set('content-type', mimeType); //設(shè)置返回類型
        ctx.body = file; //返回圖片
    }
    catch(e){
        ctx.body = { code: 0, data:e,msg: 'view media fail'};
    }
});

module.exports=router

渲染成功！

?? 渲染圖片

??渲染404

??預(yù)覽pdf

??預(yù)覽視頻

?總結(jié)

Koa 是一個(gè) Node.js Web 框架，它提供了一組 API，用于構(gòu)建 Web 應(yīng)用程序和 API。在使用 Koa 進(jìn)行 Web 開發(fā)時(shí)，通常需要下載和安裝 Koa，然后編寫代碼來定義路由、處理請(qǐng)求和響應(yīng)、以及渲染視圖等。

以下是使用 Koa 進(jìn)行 Web 開發(fā)時(shí)需要掌握的主要內(nèi)容：

1. 下載和安裝 Koa：可以使用 npm 命令來下載和安裝 Koa，如：npm install koa。

2. 定義路由：可以使用 Koa-router 模塊來定義路由，將請(qǐng)求映射到處理程序上。

3. 處理請(qǐng)求和響應(yīng)：可以使用 Koa 中間件來處理請(qǐng)求和響應(yīng)，例如：koa-bodyparser 中間件用于解析請(qǐng)求體，koa-static 中間件用于提供靜態(tài)文件服務(wù)等。

4. 渲染視圖：可以使用第三方模板引擎來渲染視圖，例如：koa-views 中間件用于集成模板引擎，例如 ejs、pug、handlebars 等。

使用 Koa 進(jìn)行 Web 開發(fā)，需要具備一定的 Node.js 基礎(chǔ)、HTTP 知識(shí)、異步編程和中間件等方面的技能。同時(shí)，需要熟練掌握 Koa 的 API 和相關(guān)的第三方模塊，以便快速開發(fā)高效的 Web 應(yīng)用程序和 API。

下載使用 koa-send
預(yù)覽使用 mime-types

?結(jié)束

本文分享到這結(jié)束，如有錯(cuò)誤或者不足之處歡迎指出！

?? 點(diǎn)贊，是我創(chuàng)作的動(dòng)力！
?? 收藏，是我努力的方向！
?? 評(píng)論，是我進(jìn)步的財(cái)富！
?? 最后，感謝你的閱讀！文章來源地址http://www.zghlxwxcb.cn/news/detail-751860.html

到了這里，關(guān)于node實(shí)戰(zhàn)——koa實(shí)現(xiàn)文件下載和圖片/pdf/視頻預(yù)覽（node后端儲(chǔ)備知識(shí)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！