node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)

简介: node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)

⭐前言

大家好,我是yma16,本文分享关于node实战——koa实现文件下载和图片预览。

本文适用对象:前端初学者转node方向,在校大学生,即将毕业的同学,计算机爱好者。

node系列往期文章

node_windows环境变量配置

node_npm发布包

linux_配置node

node_nvm安装配置

node笔记_http服务搭建(渲染html、json)

node笔记_读文件

node笔记_写文件

node笔记_连接mysql实现crud

node笔记_formidable实现前后端联调的文件上传

node笔记_koa框架介绍

node_koa路由

node_生成目录

node_读写excel

node笔记_读取目录的文件

node笔记——调用免费qq的smtp发送html格式邮箱

node实战——搭建带swagger接口文档的后端koa项目(node后端就业储备知识)

node实战——后端koa结合jwt连接mysql实现权限登录(node后端就业储备知识)

node实战——koa给邮件发送验证码并缓存到redis服务(node后端储备知识)

http下载

HTTP下载是通过HTTP协议从Internet上下载(或上传)文件的过程。它是一种通过网页浏览器下载文件的常见方式。

通常,HTTP下载发生在以下情形下:

  1. 用户在网页浏览器中单击下载链接时,浏览器自动使用HTTP协议向服务器请求文件并将其下载到本地计算机。
  2. 用户使用特殊的下载管理器程序(如IDM,迅雷等)来下载文件,这些下载管理器也使用HTTP协议从服务器下载文件。

无论使用哪种方式,HTTP下载的基本过程都是相同的:客户端向服务器请求文件并接收响应,然后将文件下载到本地计算机。

⭐koa-send库实现下载

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 框架的中间件,它简化了发送静态文件作为对 HTTP 请求的响应的过程。它允许您从目录中提供文件,并选择性地应用缓存控制标头、将文件作为附件发送以及处理范围请求(部分内容)。它通常用于提供 CSS、JavaScript、图像和其他类型的静态资产。

安装

$ npm install koa-send

封装一个下载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对应的文件

实现效果 https://yongma16.xyz/cat-web/#/

⭐mime-types库实现图片预览

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 邮件扩展类型)是一种根据其性质和格式对 Internet 上的文件进行分类的方法。Web 服务器和浏览器使用它们来识别所请求或传输的文档的文件类型。MIME 类型的示例包括:

  • text/plain:纯文本文件
  • text/html:HTML(超文本标记语言)文件
  • 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 视频文件。
    对于不同类型的文件,还有许多其他 MIME 类型,并且随着新文件格式的出现,会添加新的 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) {
            //如果服务器不存在请求的图片,返回默认图片
            file = fs.readFileSync('./media/static/404.png'); //读取文件
        }
        let mimeType = mime.lookup(filePath); //读取图片文件类型
        ctx.set('content-type', mimeType); //设置返回类型
        ctx.body = file; //返回图片
    }
    catch(e){
        ctx.body = { code: 0, data:e,msg: 'view media fail'};
    }
});
module.exports=router

渲染成功!

💖 渲染图片

💖渲染404

💖预览pdf

💖预览视频

⭐总结

Koa 是一个 Node.js Web 框架,它提供了一组 API,用于构建 Web 应用程序和 API。在使用 Koa 进行 Web 开发时,通常需要下载和安装 Koa,然后编写代码来定义路由、处理请求和响应、以及渲染视图等。

以下是使用 Koa 进行 Web 开发时需要掌握的主要内容:

  1. 下载和安装 Koa:可以使用 npm 命令来下载和安装 Koa,如:npm install koa。
  2. 定义路由:可以使用 Koa-router 模块来定义路由,将请求映射到处理程序上。
  3. 处理请求和响应:可以使用 Koa 中间件来处理请求和响应,例如:koa-bodyparser 中间件用于解析请求体,koa-static 中间件用于提供静态文件服务等。
  4. 渲染视图:可以使用第三方模板引擎来渲染视图,例如:koa-views 中间件用于集成模板引擎,例如 ejs、pug、handlebars 等。

使用 Koa 进行 Web 开发,需要具备一定的 Node.js 基础、HTTP 知识、异步编程和中间件等方面的技能。同时,需要熟练掌握 Koa 的 API 和相关的第三方模块,以便快速开发高效的 Web 应用程序和 API。

下载使用 koa-send

预览使用 mime-types

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!


目录
相关文章
|
缓存 安全 前端开发
构建高效后端服务:从理论到实战
在数字化浪潮的推动下,后端服务成为了支撑现代互联网应用的核心。本文旨在揭示如何打造一个既可靠又高效的后端系统,从基础架构设计、代码组织、性能优化到安全防护,全方位解析后端开发的艺术。通过实际代码示例和深入浅出的解释,引导读者理解并掌握后端开发的关键技术点。
377 6
|
存储 SQL 数据库
深入浅出后端开发之数据库优化实战
【10月更文挑战第35天】在软件开发的世界里,数据库性能直接关系到应用的响应速度和用户体验。本文将带你了解如何通过合理的索引设计、查询优化以及恰当的数据存储策略来提升数据库性能。我们将一起探索这些技巧背后的原理,并通过实际案例感受优化带来的显著效果。
278 4
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
374 4
|
运维 NoSQL Java
后端架构演进:微服务架构的优缺点与实战案例分析
【10月更文挑战第28天】本文探讨了微服务架构与单体架构的优缺点,并通过实战案例分析了微服务架构在实际应用中的表现。微服务架构具有高内聚、低耦合、独立部署等优势,但也面临分布式系统的复杂性和较高的运维成本。通过某电商平台的实际案例,展示了微服务架构在提升系统性能和团队协作效率方面的显著效果,同时也指出了其带来的挑战。
692 4
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
533 1
|
前端开发 JavaScript
node接收前端上传的图片,单文件、多文件同name、多文件不同name
本文介绍了在Node.js中使用multer模块接收前端上传的图片,包括单文件上传、多文件上传(同name和不同name)以及任意类型文件上传的方法。
672 0
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
668 0
|
前端开发 JavaScript NoSQL
探索后端开发之旅:从基础到高级实战
【10月更文挑战第24天】在这个数字时代的浪潮中,后端开发如同一座巨大的宝藏岛,等待着勇敢的探险者去发掘。本文将作为你的藏宝图,引领你从浅滩走向深海,探索后端开发的广阔天地。无论你是初心者还是资深开发者,这篇文章都将为你提供价值连城的知识和技能。准备好了吗?让我们启航,一起构建强大、高效、安全的后端系统!
|
存储 缓存 负载均衡
后端开发中的性能优化策略
本文将探讨几种常见的后端性能优化策略,包括代码层面的优化、数据库查询优化、缓存机制的应用以及负载均衡的实现。通过这些方法,开发者可以显著提升系统的响应速度和处理能力,从而提供更好的用户体验。
554 6
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
687 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡